Question

我试图使用jQuery map函数获取checked复选框的值，它工作正常。问题是：当我用input ul包裹li s（类型复选框）时，我无法获取已选中复选框的值。此外，我希望用户单击复选框本身或li标签以选中复选框。到目前为止我的尝试：

<form name="myform" action="" method="get">
    <ul class="chk">
        <li><input type="checkbox" name="chk[]" value="India" />India</li>
        <li><input type="checkbox" name="chk[]" value="Pakistan" />Pakistan</li>
        <li><input type="checkbox" name="chk[]" value="UK" />UK</li>
        <li><input type="checkbox" name="chk[]" value="USA" />USA</li>
        <li><input type="checkbox" name="chk[]" value="Russia" />Russia</li>
    </ul>
</form>

$(document).ready(function(){
    $('.chk li').click(function(){
        var c = $(this).children();

        var check = $(c).map(function(){ 
            check.attr('checked','checked');
            return this.value;
        });
        console.log($(check));
    });
});

Answer 1

以下是使用map()：

的内容

$('.chk li').click(function (e) {
    var innerCheckbox = $(this).find(':checkbox');
    if (e.target != innerCheckbox[0]) {
        innerCheckbox.prop('checked', !innerCheckbox.prop('checked'));
    }
    var check = $(this).parent().find(':checkbox:checked').map(function () {
        return this.value; // or return this;
    }).get(); // <---------- calling get() to get a basic array

    console.log(check); // array with the values of the checked ones
});

如果事件的目标是li，则会选中此复选框。之后，它会选中已选中复选框的列表，并将map()的值添加到check数组中。

See demo here

Answer 2

要启用单击标签，请使用：

<li><input type="checkbox" name="chk[]" id="ch1" value="India" />
   <label for="ch1">India</label>
</li>

其余的已经回答了。

Answer 3

尝试

$(document).ready(function(){
    $('.chk li').click(function(){
        var c = $(this).children(':checkbox');

        var check = $(c).map(function(){ 
            return this.checked ? this.value : undefined;
        });
        console.log(check);
    });
});

如何在点击li或复选框本身时使用map（）获取仅检查复选框的值

3 个答案: