jQuery实现复选框的全选和反选
话不多说,请看代码
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<body>
<form>
<labelfor="apple">苹果</label>
<inputtype="checkbox"name="apple">
<labelfor="banana">香蕉</label>
<inputtype="checkbox"name="banana">
<labelfor="orange">橘子</label>
<inputtype="checkbox"name="orange">
<inputtype="button"value="全选"onclick="allPick()">
<inputtype="button"value="全不选"onclick="unAllPick()">
<inputtype="button"value="反转"onclick="inverserPick()">
</form>
<scriptsrc="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
//全选
functionallPick(){
$("[type=checkbox]:checkbox").each(function(){
this.checked=true;
})
}
//全不选
functionunAllPick(){
$("[type=checkbox]:checkbox").each(function(){
this.checked=false;
})
}
//反转
functioninverserPick(){
$("[type=checkbox]:checkbox").each(function(){
this.checked=!this.checked;
})
}
</script>
</body>
</html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持毛票票!