基本上我不想做的是制作jQuery函数，当它点击复选框名称时我有提示窗口来更改复选框名称，但它会自动选中/取消选中复选框本身。我需要点击标签时是否可以不触发复选框？
P.S希望清楚我写的内容：）
我的标记是：
<div class="checkbox">
<input id="check1" type="checkbox" name="check">
<label for="check1">Checklist One</label>
<br>
<input id="check2" type="checkbox" name="check" checked>
<label for="check2">Checklist two</label>
<br>
<input id="check3" type="checkbox" name="check">
<label for="check3">Checklist 3</label>
</div> <!-- END OF CHECKBOX -->
答案 0 :(得分：2)
从标签
中删除属性<div class="checkbox">
<input id="check1" type="checkbox" name="check">
<label>Checklist One</label>
<br>
<input id="check2" type="checkbox" name="check" checked>
<label>Checklist two</label>
<br>
<input id="check3" type="checkbox" name="check">
<label>Checklist 3</label>
</div>
答案 1 :(得分：1)
你可以这样解决：
$('label').on('click', function(e){
e.preventDefault();
// here you can add your code to handle the rename
})<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<div class="checkbox">
<input id="check1" type="checkbox" name="check">
<label for="check1">Checklist One</label>
<br>
<input id="check2" type="checkbox" name="check" checked>
<label for="check2">Checklist two</label>
<br>
<input id="check3" type="checkbox" name="check">
<label for="check3">Checklist 3</label>
</div>
</body>
</html>
答案 2 :(得分：0)
一种可能的方法如下：
import java.util.ArrayList;
public class ArrayListTest {
public static void main(String[] args){
//test1();
test2();
}
private static void test1(){
ArrayList<String> list = new ArrayList<String>() {{
//return the default districts, which is all of them
add("mzuzu");
add("lilongwe");
add("blantyre");
add("zomba");
}};
ArrayList list2 = new ArrayList();
list2.add(list);
list.remove("blantyre");
list2.add(0,"blantyre");
System.out.println(list);
System.out.println(list2);
}
private static void test2(){
ArrayList<String> list = new ArrayList<String>() {{
//return the default districts, which is all of them
add("mzuzu");
add("lilongwe");
add("blantyre");
add("zomba");
}};
System.out.println(list);
list.remove("blantyre");
list.add(0,"blantyre");
System.out.println(list);
}
// binding the anonymous function of the on() method
// as the 'click' event-handler, passing the event to
// that anonymous function:
$('label').on('click', function (e) {
// preventing the default action of the
// <label> element:
e.preventDefault();
// selecting the appropriate <input> element using
// the htmlFor property of the <label>:
$('#' + this.htmlFor)
// updating the name property (not the attribute)
// of the <input> using the anonymous function of
// of the prop() method:
.prop('name', function(i,oldName) {
// i: the first argument, the index of the
// current element in the collection,
// oldName: the current value of the property
// we're working with.
// presenting a prompt to the user, informing them of the
// current name, and asking if they wish to change it;
// if they should enter a new name that new name is returned
// to the variable, otherwise if they click cancel null
// is returned:
var newName = prompt("Do you want to change the name from " + oldName + '?');
// here we check for a newName existing (so a new name was entered)
// if it was we return that newName, otherwise we return the oldName:
return newName ? newName : oldName;
});
});
$('label').on('click', function(e) {
e.preventDefault();
$('#' + this.htmlFor).prop('name', function(i, oldName) {
var newName = prompt("Do you want to change the name from " + oldName + '?');
return newName ? newName : oldName;
});
});label::after {
content: '';
display: block;
height: 0.5em;
width: 0;
}
当然，如果没有jQuery使用本机DOM，这是可能的：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox">
<input id="check1" type="checkbox" name="check">
<label for="check1">Checklist One</label>
<input id="check2" type="checkbox" name="check" checked>
<label for="check2">Checklist two</label>
<input id="check3" type="checkbox" name="check">
<label for="check3">Checklist 3</label>
</div>
// using a named function to handle the functionality,
// passing in the relevant element, the event and
// name of the property to change:
function updateProperty(el, event, property) {
// cancelling the default behaviour:
event.preventDefault();
// finding the relevant <input> element using
// the <label> element's htmlFor property:
var input = document.getElementById(el.htmlFor),
// retrieving the current property-value:
oldVal = input[property],
// asking the user if they want to update the
// relevant property from the existing value:
newVal = prompt("Do you want to update the " + property + " from '" + oldVal + "'?");
// if they enter a new value that wil be stored as
// as a String in the newVal variable and will
// return a truthy result, and will set the
// relevant property to the newVal, otherwise if
// no new value was entered the newVal will
// evaluate to false, and the oldVal will be set as
// the property-value:
input[property] = newVal ? newVal : oldVal;
}
// converting the result of document.querySelectorAll() into
// an Array, using Array.from(), and iterating over that Array
// with Array.prototype.forEach():
Array.from(document.querySelectorAll('label')).forEach(function(label) {
// 'label' the first (only) argument is a reference to the
// Array-element of the Array over which we're iterating.
// binding the anonymous functiona s the 'click'
// event-handler:
label.addEventListener('click', function(e) {
// 'e' is the event object.
// here we call the function, and pass
// arguments to that function:
// 'this' : the <label> element that
// received/initiated the event,
// 'e' : the event itself,
// 'name' : the property we wish to
// update within the called function.
updateProperty(this, e, 'name');
});
});
function updateProperty(el, event, property) {
event.preventDefault();
var input = document.getElementById(el.htmlFor),
oldVal = input[property],
newVal = prompt("Do you want to update the " + property + " from '" + oldVal + "'?");
input[property] = newVal ? newVal : oldVal;
}
Array.from(document.querySelectorAll('label')).forEach(function(label) {
label.addEventListener('click', function(e) {
updateProperty(this, e, 'name');
});
});label::after {
content: '';
display: block;
height: 0.5em;
width: 0;
}
参考文献：