判断多个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("对不起:至少要选择一项爱好哦!");
    };

};