判断多个checkbox复选框至少选一个(提交时必须选择一个)
HTML代码:
<h2>请选择您的爱好:</h2>
<form action="" method="post" id="form">
<label><input type="checkbox" name="hobby" value="上班" />上班</label>
<label><input type="checkbox" name="hobby" value="运动" />运动</label>
<label><input type="checkbox" name="hobby" value="看书" />看书</label>
<label><input type="checkbox" name="hobby" value="上网" />上网</label>
<label><input type="checkbox" name="hobby" value="网购" />网购</label>
<label><input type="checkbox" name="hobby" value="其他" />其他</label>
<button type="reset">重 置</button>
<button type="button" onclick="Submit()">提 交</button>
</form>
jQuery写法:
function Submit() {
var checkOne = false; //判断是否被选择条件
var chboxVal = []; //存入被选中项的值
var checkBox = $('input[name = hobby]'); //获得得到所的复选框
for (var i = 0; i < checkBox.length; i++) {
//如果有1个被选中时(jquery1.6以上还可以用if(checkBox[i].prop('checked')) 去判断checkbox是否被选中)
if (checkBox[i].checked) {
checkOne = true;
chboxVal.push(checkBox[i].value)//将被选择的值追加到
};
};
if (checkOne) {
alert("您选择爱好对应的value是:" + chboxVal);
} else {
alert("对不起:至少要选择一项爱好哦!");
};
};
// 顺便说一下设置选中select中的某一项的方法
方法1:
$('select[name="'+name+'"]').val(value);
方法2:
$('select[name="'+name+'"]').find("option[value="+value+"]").prop("selected",true);
注:如果value为数字类型时,将其value值转换为字符串才行哦!!
如:$('select[name="'+name+'"]').find("option[value=' "+value+" ']").prop("selected",true);
ES6写法:
function Submit() {
var checkOne = false; //判断是否被选择条件
var chboxVal = []; //存入被选中项的值
var checkBox = document.querySelectorAll('input[name = "hobby"]'); //获得得到所的复选框
var checkArr = Array.from(checkBox); //将类数组转为数组
// 以前的写法:
checkArr.forEach(item => {
//如果有1个被选中时 选择条件 为true 并将值添加到数组中
if (item.checked) {
checkOne = true;
chboxVal.push(item.value)//将被选择的值追加到
};
});
// 现在的写法:只要有1个条件满足 就会返回true
checkOne = checkArr.some((item) => {
return item.checked;
};
// 顺便说一下every方法:当全部条件满足 才会返回true(特别适合用于判断是否全选功能)
checkOne = checkArr.every((item) => {
return item.checked;
};
if (checkOne) {
alert("您选择爱好对应的value是:" + chboxVal);
} else {
alert("对不起:至少要选择一项爱好哦!");
};
};