jQurey全选，反选，不全选功能实现

╰+哭是因爲堅強的太久メ 2022-08-21 10:53 348阅读 0赞

**html部分**

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>全选，反选，不全选</title>  
<link rel="stylesheet" type="text/css" href="../css/reset.css"/>  
<link rel="stylesheet" type="text/css" href="../css/ces.css"/>  
</head>  
<body>  
<div class="checkbox">  
<div id="checkbox">  
<input type="checkbox" name="1" id="check1" value="全选"/><label for="">全选</label>  
<input type="checkbox" name="1" id="check2" value="反选"/><label for="">反选</label>  
<input type="checkbox" name="1" id="check3" value="不全选"/><label for="">不全选</label>  
</div>  
<div id="check">  
<p>请选择以下爱好</p>  
<p><input type="checkbox" name="" id="1" /><label for="1">看书</label></p>  
<p><input type="checkbox" name="" id="2" /><label for="2">听音乐</label></p>  
<p><input type="checkbox" name="" id="3" /><label for="3">旅游</label></p>  
<p><input type="checkbox" name="" id="4" /><label for="4">玩游戏</label></p>  
<p><input type="checkbox" name="" id="5" /><label for="5">冒险</label></p>  
<p><input type="checkbox" name="" id="6" /><label for="6">美食</label></p>  
<p><input type="checkbox" name="" id="7" /><label for="7">踏春</label></p>  
</div>  
</div>  
</body>  
<script src="../../jqurey/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>  
<script src="../../jqurey/checkbox.js" type="text/javascript" charset="utf-8"></script>  
</html>

**css 部分**

.checkbox\{  
width: 400px;  
height: 400px;  
border: 1px dashed \#ccc;  
margin: 200px auto 0;  
\}  
\#checkbox\{  
height: 30px;  
line-height: 30px;  
border-bottom: 1px solid \#6CD299;  
\}  
\#check\{  
height: 100%;  
background: \#6CD299;  
\}  
\#check p \{  
height: 30px;  
line-height: 30px;  
font-size: 14px;  
color: \#000;  
margin-left: 20px;  
width: 100%;  
\}

**jQurey部分**

$(function()\{  
function onCheckBox()\{  
var $checkInput = $('\#checkbox input');  
var $checkb = $('\#check :checkbox');  
$checkInput.on('click',function()\{  
$(this).prop('checked','checked');  
if($(this).checked = true)\{  
$(this).siblings().prop('checked',false);  
var \_inputVal = $(this).val();  
if(\_inputVal == '全选')\{  
$('\#check input\[type=checkbox\]').prop('checked','checked');  
\}  
if(\_inputVal == '不全选')\{  
$('\#check input\[type=checkbox\]').prop('checked',false);  
\}  
if(\_inputVal == '反选')\{  
$('\#check input\[type=checkbox\]').each(function()\{   
$(this).prop("checked", !$(this).prop('checked'));  
\})  
\}  
\}  
\})  
function checkBox()\{  
var \_checkL = $checkb.size();  
var \_chek = 0;  
$('\#check :checkbox').each(function()\{  
if($(this).prop('checked')==true)\{  
\_chek++;  
\}  
\})  
if(\_checkL == \_chek)\{  
$('\#check1').prop('checked',true);  
\}else\{  
$('\#check1').prop('checked',false);  
\}  
\}  
$checkb.on('click',function()\{  
checkBox();  
\})  
\}  
onCheckBox();  
\})

遇见一个比较坑的问题，就是用attr不能执行checkBox()这个方法，多方求证的情况下才懂得用，prop方法；