全选和反选 Js/JQ写法

原创 2019-02-15 15:53:14 270
摘要:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<script type="text/javascript" src="jq_3.3.1_mi.js"></script>

<title>Document</title>

</head>

<body>

<div>

<input type="checkbox" id="checkAll"> <label for="checkAll"> JQ全选</label>

<input type="checkbox" id="checkAll_JS" onclick="checkAll_JS()"> <label for="checkAll_JS">JS全选</label>

<hr>

<input type="checkbox" name="checkOne[]" id="1"> <label for="1"> 1</label><br>

<input type="checkbox" name="checkOne[]" id="2"> <label for="2"> 2</label><br>

<input type="checkbox" name="checkOne[]" id="3"> <label for="3"> 3</label><br>

<input type="checkbox" name="checkOne[]" id="4"> <label for="4"> 4</label><br>

<input type="checkbox" name="checkOne[]" id="5"> <label for="5"> 5</label><br>

</div>


<script>

//

// // js写法

function checkAll_JS(){

var checkAll_js=document.getElementById("checkAll_JS");

var all_js=document.getElementsByName('checkOne[]');

for (var i = 0; i < all_js.length; i++) {

if(checkAll_js.checked){

all_js[i].checked=true;

}else{

all_js[i].checked=false;

}

}

}

// JQ写法

// jquery attr()方法获取标签的 checked 会有问题,所以用了 prop() 方法。

$(function(){

$("#checkAll").on('click',function(){

var ck=$(this).prop('checked');

var all=$("input[name='checkOne[]']");

if(ck){

for (var i = 0; i < all.length; i++) {

$(all[i]).prop('checked',true);

}

}else{

for (var i = 0; i < all.length; i++) {

$(all[i]).prop('checked',false);

}

}

})

})


</script>

</body>

</html>


批改老师:天蓬老师批改时间:2019-02-15 16:11:28
老师总结:prop('checked',false);这个方法用得好

发布手记

热门词条