获取checkbox中被选中的值-蒲公英云

获取checkbox中被选中的值

冷不防 2022-03-29 20:18 368阅读 0赞

对于下面的前台代码，要获取其中被选中的checkbox的值

<form name="testForm" id="myForm">
    <input type="checkbox" name="ids" value="1" />1<br />
    <input type="checkbox" name="ids" value="2" />2<br />
    <input type="checkbox" name="ids" value="3" />3<br />
    <input type="checkbox" name="ids" value="4" />4<br />
    <input type="checkbox" name="ids" value="5" />5<br />
    <input type="checkbox" name="ids" value="6" />6<br />
    <input type="checkbox" name="ids" value="7" />7<br />
    <input type="checkbox" name="ids" value="8" />8<br />
    <button type="button" onclick="test()">js</button>
    <button type="button" onclick="jqueryFun()">jquery</button>
</form>

1、通过js实现

对于name属性，可以通过 document.name1.name2…. 来获取所有name属性为name2的元素

function test(){
    debugger;
        // 获取所有的复选框元素
    var obj1 = document.testForm.ids;
    var ids = [];
    for(i = 0; i< obj1.length; i++){
        if(obj1[i].checked){
            ids.push(obj1[i].value)
            $("body").append("<p>"+obj1[i].value+"</p>")
        }
    }
}

2、通过jQuery实现

function jqueryFun(){
    debugger;
    var ids = [];
    $("input[name='ids']:checked").each(function(i){
        ids.push($(this).val())
        $("body").append("<p>"+$(this).val()+"</p>")
    })
}