jquery实现 checkbox 复选框的单选和全选

发布时间:2019-05-09 编辑:小张个人博客 查看次数:1206


jQuery 实现 checkbox 全选功能,jQuery 事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下。


<input type="checkbox" id="all_checked" onclick="all_check('checkbox[]')">
<label><input type="checkbox" name="checkbox[]" />小米</label>
<label><input type="checkbox" name="checkbox[]" />华为</label>
<label><input type="checkbox" name="checkbox[]" />苹果</label>
// 全选/反选
function all_check(obj){
    if($('#all_checked').attr('checked') == 'checked'){
        $("input[name='"+obj+"']").attr('checked',true);
    }else{
        $("input[name='"+obj+"']").attr('checked',false);
    }
}


jQuery 实现 checkbox 全选和反选方案二

<label><input type="checkbox" name="all_check" />全选</label>
<br><br>
<label><input type="checkbox" name="checkbox" />小米</label>
<label><input type="checkbox" name="checkbox" />华为</label>
<label><input type="checkbox" name="checkbox" />苹果</label>
<!-- 引入jQuery官方类库 -->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<!-- start 全选/全不选 -->
<script type="text/javascript">
	$('input[name="all_check"]').on("click",function(){
		if($(this).is(':checked')){
			$('input[name="checkbox"]').each(function(){
				$(this).prop("checked",true);
			});
		}else{
			$('input[name="checkbox"]').each(function(){
				$(this).prop("checked",false);
			});
		}
	});
</script>
<!-- end 全选/全不选 -->





出处:小张个人博客

网址:http://blog.023xs.cn/

您的支持是对博主最大的鼓励,感谢您的认真阅读。欢迎转载,但请保留该声明。

顶部

Copyright © 小张个人博客 All Rights Reserved 渝ICP备15006773号-1

联系方式:[email protected] | 本站文章仅供学习和参考

渝公网安备 50024102500267号