table表格中如何全选,代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<table class="table table-striped table-bordered table-hover dataTables-example">
<thead>
<tr>
<th><input type="checkbox" class="i-checks" id="questionCheck"/></th>
<th>科目</th>
<th>成绩</th>
<th>性别</th>
</tr>
</thead>
<tbody id="questionlist">
<tr class="aa" draggable="true">
<td><input class="i-checks" type="checkbox"></td>
<td width="6%">语文</td>
<td width="6%">86</td>
<td width="6%">男</td>
</tr>
<tr class="aa" draggable="true">
<td><input class="i-checks" type="checkbox"></td>
<td width="6%">数学</td>
<td width="6%">99</td>
<td width="6%">男</td>
</tr>
</tbody>
</table>
<script src="./jquery-3.3.1.min.js"></script>
<script>
$(function(){
$("#questionCheck").click(function () {
var b = $('#questionlist tr.aa input[type="checkbox"]');
if ($(this).prop('checked')) {
b.prop('checked', true);
} else {
b.prop('checked', false);
}
});
})
</script>
</body>
</html>
效果如图所示:样式难看,凑合着看吧
三种方法实现对多选框的反选,代码如下:
<body>
<h1>遍历jQuery对象的内部的DOM对象</h1>
<input type="button" value="反选" onclick="fan()" />
<p>选择1:<input type="checkbox" /></p>
<p>选择1:<input type="checkbox" /></p>
<p>选择1:<input type="checkbox" /></p>
<p>选择1:<input type="checkbox" /></p>
<p>选择1:<input type="checkbox" /></p>
</body>
<script type="text/javascript">
//方法一 面向过程的思路
function fan(){
var inp=$('input:checkbox');//获取input 取出的是jq对象
for(var i=0;i<inp.length;i++){ //循环取出每一行的input
//判断input是否有checked 这里inp[i]是dom对象,还要加$()转成dom对象
if($(inp[i]).prop('checked')==true){
$(inp[i]).prop('checked',false); //改checked值为false
}else {
$(inp[i]).prop('checked',true); //改checked值为true
}
}
}
//方法二 面向函数式的思路, 回调函数
function fan(){
$('input:checkbox').each(function(){
console.log(this);
//console.log($('input:checkbox'));
if($(this).prop('checked')==true){
$(this).prop('checked',false); //改checked值为false
}else {
$(this).prop('checked',true); //改checked值为true
}
});
}
//方法三 更简化的方式, 直接对自己取反
function fan(){
$('input:checkbox').each(function(){
this.checked=!this.checked;
});
}
</script>