Question

我想将所选复选框的值设置为文本输入

例如：请参阅此图片Click

问题是当我点击＆＃34;全选＆＃34;复选框＆＃34;孩子＆＃34;选中复选框但未在文本框中设置值，并在取消选中＆＃34;选择全部＆＃34;时设置值。复选框

我想在数组中获取复选框值，所以我使用的是map函数，

请参阅小提琴上的jquery

HTML CODE

<form action="" id="form">
    <input type="checkbox" id="selectAll">
    <label for="selectAll">Select All</label><br>

    <div class="child">
        <input type="checkbox" class="selectCb" value="1" id="one">
        <label for="one">One</label><br>
        <input type="checkbox" id="two" class="selectCb" value="2">
        <label for="two">Two</label><br>
        <input type="checkbox" class="selectCb" value="3" id="three">
        <label for="three">Three</label><br>
    </div>


    <input type="text" id="textBox">
</form>

修改

这两个代码都在运作

$(document).on("click", "#selectAll", function () {

    var chkAll = $(".child input[type='checkbox']:checked").map(function() { 
        return $(this).val();
    }).get();
    $("#textBox").val(chkAll.join(' '));

});

检查小提琴fiddle 2

    $(document).on("change", "#selectAll", function () {

    var chkAll = $(".child input[type='checkbox']").prop('checked', this.checked).map(function () {
        return $(this).val();
    }).get();
    $("#textBox").val(chkAll.join(' '));
});

检查小提琴fiddle 3

现在我怀疑哪一个更好更正确？

因为我想为所有复选框设置背景图像，所以我使用css隐藏所有复选框

 #form input[type="checkbox"] {
       display: none;
    }

使用以下css代码

为复选框设置背景图像

为＆＃34;选择全部＆＃34;设置背景复选框

input[type="checkbox"]#selectAll + label#selectAllLbl::before {
    content: '';
    background: url('http://s30.postimg.org/uhql9zd5p/chk_uncheck.png') no-repeat;
    height: 22px;
    width: 22px;
    display: inline-block;
    margin-right: 10px;
}

input[type="checkbox"]#selectAll:checked + label#selectAllLbl::before {
    content: '';
    background: url('http://s9.postimg.org/6k81psojf/chk_enabled.png') no-repeat;
}

为＆＃34; child＆＃34;设置背景复选框

input[type="checkbox"].selectCb + label.childLbl::before {
    content: '';
    background: url('http://s30.postimg.org/uhql9zd5p/chk_uncheck.png') no-repeat;
    height: 22px;
    width: 22px;
    display: inline-block;
    margin-right: 10px;
}

input[type="checkbox"].selectCb:checked + label.childLbl::before {
    content: '';
    background: url('http://s9.postimg.org/6k81psojf/chk_enabled.png') no-repeat;
}

这是对的吗？在jquery中使用隐藏的复选框id和类

<input type="checkbox" id="selectAll">

<input type="checkbox" class="selectCb" value="1" id="one">

Answer 1

在第二个参数中将change切换为click：

$(document).on("change", ".selectCb", function () {

    var values = $(".child input[type='checkbox']:checked").map(function() { 
        return $(this).val();
    }).get();
    $("#textBox").val(values.join(' '));
});



$(document).on("click", "#selectAll", function () {

    var chkAll = $(".child input[type='checkbox']:checked").map(function() { 
        return $(this).val();
    }).get();
    $("#textBox").val(chkAll.join(' '));


});

Answer 2

如果您希望selectAll切换其他复选框上的检查，请使用prop()执行此操作。使用this.checked将指示是选中还是取消选中

$(document).on("change", "#selectAll", function () {

    var chkAll = $(".child input[type='checkbox']").prop('checked', this.checked).map(function () {
        return $(this).val();
    }).get();
    $("#textBox").val(chkAll.join(' '));

});

的 DEMO

Answer 3

您可以为其指定负边距，而不是隐藏复选框。

请参阅下面的CSS代码段：

#form {overflow:hidden}

#form input[type="checkbox"]{
margin-left:-25px
}

还想重复一下jonmrich已经说过切换＆＃34;改为点击＆＃34;在＆＃34;＃selectAll＆＃34;的第二个参数中复选框。

由于

选择jquery中未正确触发的所有复选框

3 个答案: