幾種常見選擇寫法阱洪，
<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);
}
需要注意的是 全選/全部選蜓萄，是要先判斷按鈕是否被選中，在選擇選項(xiàng)澄峰；
$(function() { //prop和attr方法都是設(shè)置或者修改被選元素的屬性，
// 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指當(dāng)前的html對(duì)象
});
});
$("#submit").click(function() {
var str = "你喜歡的是："
$("[name=check]:checkbox:checked").each(function() {
str += $(this).val() + "||";//這里$(this)指的是jquery對(duì)象
})
console.log(str);
});
})
attr和prop方法都是設(shè)置或修改被選元素的屬性：
attr用于HTML元素自己定義的dom屬性，
prop用于HTML元素固有的屬性堂竟，
$(this)和this的區(qū)別魂毁，$(this)返回的是jquery對(duì)象，this返回的當(dāng)前html元素對(duì)象
