bootstrap中checkbox全选,反选

本文介绍了一个使用jQuery简化Checkbox选择操作的实例,包括全选、全不选及反选功能的实现方式。通过简单的按钮点击事件,可以轻松地控制一组复选框的状态。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<span style="white-space:pre">	</span>$("#selectAll").click(function () { 
		$("#owners input:checkbox").each(function () {   
			$(this).prop('checked', true);//

	    }); 
	}); 
	
	$("#unSelect").click(function () {   
		   $("#owners input:checkbox").removeAttr("checked");  
		}); 
	
	$("#reverse").click(function () {  
	    $("#owners input:checkbox").each(function () {   
	    	this.checked = !this.checked;  
	    }); 
	}); 


注:

.attr('checked):   //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false
.prop('checked'): //16+:true/false


<input type="button" value="全选" class="btn" id="selectAll">   
<input type="button" value="全不选" class="btn" id="unSelect">   
<input type="button" value="反选" class="btn" id="reverse">  


### 解决 Bootstrap-Table 插件中全选按钮消失的问题 当遇到 Bootstrap-Table 中全选按钮消失的情况时,通常是因为某些配置项设置当或者缺少必要的初始化参数。为了恢复全选按钮的功能,建议按照以下方法进行排查修正。 #### 检查并调整 `checkboxHeader` 配置 确保在初始化表格时设置了 `checkboxHeader: true` 参数,这会强制显示表头中的全选复选框[^2]: ```javascript $('#table').bootstrapTable({ checkboxHeader: true, }); ``` #### 确认列定义包含 `radio` 或 `checkbox` 对于支持择行的表格,应在对应的列定义里声明该列为 `type='radio'` 或者 `type='checkbox'` 类型,并且要保证此类型的列只存在一个实例以防止冲突: ```json columns: [{ field: 'state', checkbox: true }] ``` #### 完整示例代码片段 这里给出一段完整的 JavaScript 初始化代码作为参考,其中包含了上述提到的关键属性设置: ```javascript $(function() { $('#table').bootstrapTable({ url: '/data', // 请求数据接口地址 method: 'get', // 数据请求方式 (post/get) toolbar: '#toolbar', // 工具栏位置 striped: true, // 是否启用斑马线效果 pagination: true, // 启用分页器 pageSize: 10, // 页面大小 pageList: [10, 25, 50, 100], // 可供择的每页记录数列表 search: true, // 开启搜索功能 showColumns: true, // 显示隐藏列控件 showRefresh: true, // 显示刷新按钮 minimumCountColumns: 2, // 当少于两个字段时禁用‘列择’项卡 clickToSelect: true, // 单击行即可中/取消中该项 uniqueId: "ID", // 主键字段名 cardView: false, // 设置卡片视图模式,默认关闭 detailView: false, // 设置子表格展开详情,默认关闭 columns: [{ field: 'state', checkbox: true // 添加这一行来激活多框 }, /* ...其他列... */ ] // 更多功能配置... }); }); ``` 通过以上措施应该能够有效解决全选按钮丢失的现象。如果仍然存在问题,则可能涉及到更复杂的场景或自定义样式覆盖等问题,在这种情况下需要进一步审查项目具体实现细节以及浏览器开发者工具下的元素状态。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值