jquery - 如何在单击 li 或使用 map() 用 ul li 包装的复选框本身时仅获取选中复选框的值

Question

我试图使用 jQuery map 函数获取选中复选框的值，它工作正常。问题是：当我用inputs （类型复选框）包装时，ul li我无法获得选中复选框的值。此外，我希望用户单击复选框本身或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数组中。

在此处查看演示。

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);
    });
});