几种常见选择写法，
<form>
你好爱好：<input type="checkbox" id="checkedAll">全选/全不选<br>
<label ><input type="checkbox" name="check" value="唱歌">唱歌</label>
<label ><input type="checkbox" name="check" value="跳舞">唱歌</label>
<label ><input type="checkbox" name="check" value="吃饭">唱歌</label>
<label ><input type="checkbox" name="check" value="烫头">唱歌</label>
<br>
<input type="button" name="all" id="checkboxAll" value="全 选">
<input type="button" name="no" id="checkedNo" value="全不选">
<input type="button" name="reverse" id="checkedRev" value="反 选">
<input type="button" id="submit" value="提 交">
</form>
//js
var form = document.getElementsByTagName("form")[0];
var inp = form.check;
var cAll = document.getElementById("checkedAll");
var all = document.getElementById("checkboxAll");
var no = document.getElementById("checkedNo");
var reverse = document.getElementById("checkedRev");
var i = 0;
//全选/反选
cAll.onclick = function() {
console.log(inp.length)
if (this.checked) {
for (i = 0; i < inp.length; i++) {
inp[i].checked = true;
}
}else {
for (i = 0; i < inp.length; i++) {
inp[i].checked = false;
}
}
};
//全选
all.onclick = function() {
for (i = 0; i < inp.length; i++) {
inp[i].checked = true;
}
}
//全不选
no.onclick = function() {
for(i = 0; i < inp.length; i++) {
inp[i].checked = false;
}
}
//反选
reverse.onclick = function() {
for (i = 0; i < inp.length; i++) {
// inp[i].checked = !inp[i].checked;//方式一
if (inp[i].checked) {
inp[i].checked = false;
}else {
inp[i].checked = true;
}
}
};
//提交
submit.onclick = function() {
var str = "你的爱好："
for (i = 0; i < inp.length; i++) {
if (inp[i].checked) {
str += inp[i].value + "||";
}
}
console.log(str);
}
需要注意的是 全选/全部选，是要先判断按钮是否被选中，在选择选项；
$(function() { //prop和attr方法都是设置或者修改被选元素的属性，
// prop方法用于HTML元素本身就带有的固有属性，
// attr方法用于HTML元素自己定义的dom属性，
$("#checkedAll").click(function() {
if (this.checked) {
$("[name=check]:checkbox").prop("checked", true);
}else {
$("[name=check]:checkbox").prop("checked", false);
}
});
$("#checkboxAll").click(function() {
$("[name=check]:checkbox").prop("checked", true);
});
$("#checkedNo").click(function() {
$("[name=check]:checkbox").prop("checked", false);
});
$("#checkedRev").click(function() {
$("[name=check]:checkbox").each(function() {
console.log(this.checked);
this.checked = !this.checked//this指当前的html对象
});
});
$("#submit").click(function() {
var str = "你喜欢的是："
$("[name=check]:checkbox:checked").each(function() {
str += $(this).val() + "||";//这里$(this)指的是jquery对象
})
console.log(str);
});
})
attr和prop方法都是设置或修改被选元素的属性：
attr用于HTML元素自己定义的dom属性，
prop用于HTML元素固有的属性，
$(this)和this的区别，$(this)返回的是jquery对象，this返回的当前html元素对象
