input[type=checkbox]使用说明
html代码段:<div><label class="labelAll"><input type="checkbox" name="test" value="全选" checked="checked"/>全选</label><label class="labelOne"><input type="checkbox" n
·
html代码段:
<div>
<label class="labelAll">
<input type="checkbox" name="test" value="全选" checked="checked"/>全选</label>
<label class="labelOne">
<input type="checkbox" name="test" value="今天星期一" checked="checked"/>今天星期一</label>
<label class="labelOne">
<input type="checkbox" name="test" value="今天星期二" checked="checked"/>今天星期二</label>
<label class="labelOne">
<input type="checkbox" name="test" value="今天星期三" checked="checked"/>今天星期三</label>
<label class="labelOne">
<input type="checkbox" name="test" value="今天星期四" checked="checked"/>今天星期四</label>
<label class="labelOne">
<input type="checkbox" name="test" value="今天星期五" checked="checked"/>今天星期五</label>
</div>
<button onclick="SubmitCheckBox()">提交</button>
Script代码段:
<script type="text/javascript">
$(function () {
// 全选、反选
$('.labelAll input').click(function (event) {
if ($(this).attr('checked')) {
$(this).attr('checked', false);
$(".labelOne input").attr({ 'checked': false })
$(".labelOne input").prop({ 'checked': false })
} else {
$(this).attr('checked', true)
$(".labelOne input").attr({ 'checked': true })
$(".labelOne input").prop({ 'checked': true })
}
})
// 单个选择
$(".labelOne input").click(function (event) {
var flag = false;
if ($(this).attr('checked')) {
$(this).attr('checked', false);
} else {
$(this).attr('checked', true)
}
$('.labelOne input').each(function (index, val) {
if ($(val).attr('checked')) {
flag = true;
} else {
flag = false;
return false;
}
});
if (flag) {
$('.labelAll input').attr('checked', true);
$('.labelAll input').prop('checked', true);
console.log(flag);
} else {
$('.labelAll input').attr('checked', false);
$('.labelAll input').prop('checked', false);
console.log(flag);
}
});
})
function SubmitCheckBox() {
var chk_value = [];
$('input[type="checkbox"]:checked').each(function () {
chk_value.push($(this).val());
});
alert(chk_value.length == 0 ? '你还没有选择任何内容!' : chk_value);
}
</script>
如果checkbox的内容是从接口请求过来动态生成的,则需要将全选/反选,单个选择框使用下面这种绑定方式:
$(document).on('click','selector',function(){
});
更多推荐
已为社区贡献1条内容
所有评论(0)