checkbox选中详解
定义和用法
:checkbox 选择器选取带有 type=checkbox 的 input 元素。找到所有的复选框,加上checked属性,属性值为真true 选择表单元素的要用冒号 :checkbox checked属性,值为true选中。
步骤和方法下面代码注释写得很清楚了，慢慢看应该都能看得懂。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// 全选
$('#qx').click(function(){
// 找到所有的复选框,加上checked属性,属性值为真true 选择表单元素的要用冒号 :checkbox
// checked属性,值为true选中
$('#ta :checkbox').prop('checked',true)
})
// 全不选
$('#qbx').click(function(){
// 找到所有的复选框,加上checked属性,属性值为false 选择表单元素的要用冒号 :checkbox
// checked属性,值为false不选中
// (1)可以这样选
// $('#ta :checkbox').prop('checked',false);
// (2)可以这样选 removeProp是将class里面的值清空
$('#ta :checkbox').removeProp('checked');
})
// 反选(1)第一种方法
// $('#fx').click(function(){
//// 获得现在处在选中状态下的元素
// var ee = $('#ta :checked');
//// 全选
// $('#ta :checkbox').prop('checked',true)
//// 将刚才处在被选中状态的元素取消选中状态
// ee.removeProp('checked');
// })
// 反选(2)第二种方法
$('#fx').click(function(){
// 每处理一个复选框就会执行一下这个function
// i当前这个元素的序号,val指的是当前这个属性的属性值
$('#ta :checkbox').prop('checked',function(i,val){
// 返回一个!val 相反的val 比如属性值是true 相反的就是false;
return !val;
})
})
})
</script>
</head>
<body>
<input type="button" name="" id="qbx" value="全不选按钮" />
<input type="button" name="" id="qx" value="全选按钮" />
<input type="button" name="" id="fx" value="反选按钮" />
<table id="ta">
<tr>
<td><input type="checkbox" /></td>
<td>好看的电影，电视剧1</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>好看的电影，电视剧2</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>好看的电影，电视剧3</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>好看的电影，电视剧4</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>好看的电影，电视剧5</td>
</tr>
</table>
</body>
</html>
原文链接：https://www.qiquanji.com/post/8529.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
