自定义input type=“checkbox“ 全选_<input type="checkbox" name="" id="">-CSDN博客

本文链接：https://blog.csdn.net/qq_42855675/article/details/117415957

这段代码展示了如何使用HTML、CSS和JavaScript实现表格中的全选和单选功能。通过CSS将原始的checkbox隐藏，并用自定义样式替代。JavaScript监听全选按钮的点击事件，实现所有单选框的选中与取消选中状态同步。同时，当单个选项被点击时，会更新全选按钮的选中状态。这个功能在数据管理或者表单操作中非常常见。

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

在这里插入图片描述

<th style="width: 78px;">
	<label style="margin-bottom: 0;">
		<input type="checkbox"  name="all_check" value="全选" class="all_check">
		<i class="bui-radios" style="top: 2px;"></i>全选
	</label>
</th>

<tr>
	<td>
		<label>
			<input type="checkbox" name="choose" value="' + applyId + '" class="choose">
			<i class="bui-radios"></i>
		</label>
	</td>
</tr>

/* 隐藏原来的checkbox */
input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	visibility: hidden;
}
.all_check {
	width: 20px;
	height: 20px;
	margin-right: 10px;
}
/*自定义radio*/
.bui-radios {
	display: inline-block;
	position: relative;
	width: 20px;
	height: 20px;
	/* 图片与文字对齐方式 */
	vertical-align: -5px;
	margin-right: 12px;
	/*未选中的样式图片*/
	background: url("/basic/images/checkbox1.png") no-repeat;
	left: 3px;
	top: 2px;
}
/*单选框选中后，自定义radio的样式*/
input[type="checkbox"]:checked+.bui-radios {
	background: url("/basic/images/checkbox2.png") no-repeat;
}

// 点击全选按钮
$('.all_check').on('click', function() {
    if ($(".all_check").is(':checked')) {
        $('.choose').prop("checked", true)
    } else {
        $('.choose').prop("checked", false);
    }
});
// 点击前面的选择按钮影响全选按钮
$('#xd_table').on('click', '.choose', function() {
	var choose_length = $('.choose').length
	if ($('.choose:checked').length != choose_length) {
		$('.all_check').prop("checked", false);
	} else {
		$('.all_check').prop("checked", true);
	}
})