JQuery获取复选框checkbox的值

悠悠 2022-08-03 12:51 348阅读 0赞

# JQuery获取复选框checkbox的值 #

> 在HTML页面上，有时需要用到input的type为checkbox，下面介绍几种获取checkedbox值的方法：

1.首先展示html代码

<!Doctype html>
    <head/>
    <body > 
    <div>
    <h2>checkbox 选取测试</h2>
    <div>
    <input type="checkbox" name="csdn" value="A" />a
    <input type="checkbox" name="csdn" value="B" />b 
    <input type="checkbox" name="csdn" value="C" />c 
    <input type="checkbox" name="csdn" value="D" />d 
    <input type="checkbox" name="csdn" value="E" />e 
    <input type="button" onclick="choose()" value="开始" /> 
    </div>
    </body> 
    </html>

页面效果  
![这里写图片描述][20150806225841830]  
2.通过js获取checkbox的值

function choose(){ 
        var obj=document.getElementsByName('csdn'); 
        var str = ''; 
        for(var i=0; i<obj.length; i++){ 
        if(obj[i].checked) str+=obj[i].value+' '; 
    } 
    alert(str); 
    }

页面效果  
![js获取checkbox的值][js_checkbox]  
3.通过Jquery获取checkbox的值

function choose(){ 
    var value=[];
    $('input[name="csdn"]:checked').each(function(){ 
        value.push($(this).val());
    });
    alert(value); 
    }

当然要想代码能执行，还需要加上jquery的库

页面效果  
![Jquery获取checkbox的值][Jquery_checkbox]

> 仔细观察发现这两种方法获取的值，中间的链接方式是不一样的，js默认两个值之间没有特殊字符，JQuery则将获取到的值用逗号’,’分割开来。

[20150806225841830]: /images/20220731/26845d1e2fcb4469b3d403b666f25199.png
[js_checkbox]: /images/20220731/d2264b79f08e434e81040014b8232b91.png
[Jquery_checkbox]: /images/20220731/79463ad7b5134390b820e3dbdcd8d6cd.png