jQuery_input[type=“checkbox“].html
陶星辰
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery_input[type="checkbox"]</title>
<script src="lib/jquery/jquery-3.2.1.js"></script>
</head>
<body>
<ol id="layerList">
<li><label for="Coffee">Coffee</label><input type="checkbox" name="layerName" id="Coffee"></li>
<li><label for="Tea">Tea</label><input type="checkbox" name="layerName" id="Tea"></li>
<li><label for="Milk">Milk</label><input type="checkbox" name="layerName" id="Milk"></li>
</ol>
<button id="selectAll">全选</button>
<button id="selectNone">全不选</button>
<script>
/*参考：
https://www.cnblogs.com/zhangyubao/p/7016728.html
https://www.cnblogs.com/anymoredo/p/4980009.html
知识点：
1.与文本对齐，样式设置。
input[type=checkbox] {
display: inline-block;
vertical-align: middle;
margin-bottom: 5px;
}
2.提交事件，筛选选中的复选框。
$('#btn_submit').submit(function(){
$('input[name="fruit"]:checked').each(function(){
var sfruit=$(this).val();
alert(sfruit);
});
return false;
});
3.判断是否选中
$("#locateOneFeature").is(':checked') -> Boolean
$obj.attr(属性, 值)方法，给 jquery 对象赋值。
var bischecked=$('#cboxchecked').is(':checked');
var fruit=$('input[name="fruit"]');
bischecked?fruit.attr('checked',true):fruit.attr('checked',false);
ajax获取html对象的属性的值：
$(this).attr("file")
*/
// 1.选择 input[name="layerName"]
let inputs = $('input[name="layerName"]');
console.log("inputs:", inputs);
// inputs.click(function () {
// // 选择 选中的 input[name="layerName"]
// let checkedInputs = $('input[name="layerName"]:checked');
// for (let i = 0; i < checkedInputs.length; i++) {
// console.log(checkedInputs[i].id);
// // Coffee
// // Tea
// // Milk
// }
// });
// 全选。
$("#selectAll").click(function () {
for (let i = 0; i < inputs.length; i++) {
// 以下代码都行。
// inputs[i].checked = "checked";
// inputs[i].checked = "true";
// 推荐使用。
inputs[i].checked = true;
}
});
// 全不选。
$("#selectNone").click(function () {
for (let i = 0; i < inputs.length; i++) {
// 以下代码都行。
// inputs[i].checked = "";
// 推荐使用。
inputs[i].checked = false;
}
})
</script>
</body>
</html>
类似资料：