一、效果演示
请选择你所掌握的语言：
全选/全不选
Java JavaScript php Python
二、源码展示
<script type="application/javascript">
$().ready(function(){
//选择所有的input类型为checkbox且name="items"，通过attr改变其checked属性
$("#checkItems").click(function(){
if($(this).attr("checked")){
$(":checkbox[name='items']").attr("checked",true);
}else{
$(":checkbox[name='items']").attr("checked",false);
}
});
//选择所有的input类型为checkbox且name="items"，遍历每一项将其取反
$("#check_reversal").click(function(){
$(":checkbox[name='items']").each(function(){
if($(this).attr("checked")){
$(this).attr("checked",false);
}else{
$(this).attr("checked",true)
}
});
});
});
</script>
<body>
请选择你所掌握的语言：
<br>
<input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选"/>全选/全不选
<br/>
<input type="checkbox" name="items" value="Java" />Java
<input type="checkbox" name="items" value="JavaScript"/>JavaScript
<input type="checkbox" name="items" value="php"/>php
<input type="checkbox" name="items" value="Python"/>Python
<br/>
<input type="button" name="checkall" id="check_reversal" value="反选" />
</body> 三、总结
$(this)：代表当前对象。 转载于:https://www.cnblogs.com/lyajs/p/5974543.html
![vue搭建过程及出现问题[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)