JQuery获取多选框内容

这里要注意单双引号的使用，在平时单引号双引号其实都是可以的，但如果有包含的情况，那么要么外面双引号里面单引号，要么就反过来。在方法一的基础上，将其转换为JQuery对象，然后用val()来取值。用JQuery的each方法遍历。2.此时我们拿到的其实是一个数组，里面存着的是。，注意到这个以后可以用value取值。1.首先先取出所有复选框对象。......

歪嗯waien

5099人浏览 · 2022-07-27 10:49:09

歪嗯waien · 2022-07-27 10:49:09 发布

html页面

<body>
        <h1>复选框操作</h1>

        爱好：<!-- 22,33,44 -->
        <input type="checkbox" class="hby"  name="hobby" value="11" />篮球&nbsp;
        <input type="checkbox" class="hby" name="hobby" value="22" />足球&nbsp;
        <input type="checkbox" class="hby" name="hobby" value="33" />排球&nbsp;
        <input type="checkbox" class="hby" name="hobby" value="44" />乒乓球&nbsp;
        
        <br /><br />
        <input type="button" value="获取" onclick="f1()" />
        <input type="button" value="设置" onclick="f2()" />
    </body>

方法一

1.首先先取出所有复选框对象

$("input[type = 'checkbox']:checked");

这里要注意单双引号的使用，在平时单引号双引号其实都是可以的，但如果有包含的情况，那么要么外面双引号里面单引号，要么就反过来。如果非要使用同一个引号类型（并不推荐），可以这样：

$('input[name=\'password\']:checked').val();

2.此时我们拿到的其实是一个数组，里面存着的是DOM对象，注意到这个以后可以用value取值。

var str = '';
for(var i = 0; i < $("input[type='checkbox']:checked").length; i++) {
     console.log($("input[type='checkbox']:checked")[i].value);//拿到的是dom对象，可以理解为JQuery是对Dom进行封装
     str += $("input[type='checkbox']:checked")[i].value + ',';
}

str = str.substring(0, str.length - 1);//截去末尾的逗号
console.log(str);

方法二

在方法一的基础上，将其转换为JQuery对象，然后用val()来取值

 for(var i = 0; i < $("input[type='checkbox']:checked").length; i++) {
    str += $("input[type = 'checkbox']:checked").eq(i).val() + ',';//将其转换成JQuery对象
 }
 str = str.substring(0, str.length - 1);//截去末尾的逗号
 console.log(str);

方法三

用JQuery的each方法遍历

for(var i = 0; i < $("input[type='checkbox']:checked").length; i++) {
    $.each($("input[type='checkbox']:checked"), function(){
        //里面有一个隐藏的this，表示正在遍历的对象
        //而且该this还是一个DOM对象
        //str += this.value + ',';

        //DOM对象转换成JQuery对象，只要把DOM对象作为参数传递给$()
        str += $(this).val() + ',';
    });
}
str = str.substring(0, str.length - 1);//截去末尾的逗号
console.log(str);