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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持毛票票!
热门推荐
7 简短的二胎祝福语
10 简短霸气女儿生日 祝福语
11 祝福语高考小众诗句简短
12 元旦祝福语20秒简短
13 老师过年祝福语大全 简短
14 一生祝福语简短
15 产检祝福语简短霸气
16 朋友店开张祝福语简短
17 生日爱情祝福语大全简短
18 朋友女儿生日祝福语 简短