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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持毛票票!
热门推荐
3 祝福语简短的微信
10 幼儿祝福语大全简短贺卡
11 感谢教官文案祝福语简短
12 鼠年同事祝福语简短创意
13 元旦祝福语 简短独特群发
14 妈咪跟我生日祝福语简短
15 给儿子新婚祝福语简短
16 伴娘祝福语长文案简短
17 恭喜高考完祝福语简短
18 生日祝福语送老公简短