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

Question

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