CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
Prakash
Prakash

Reputation: 113

select all checkboxes in jquery not triggered properly

I want to set values of selected checkbox to text input

For example: see this image Click

Problem is when i click "Select All" checkbox "child" checkboxes are checked but value not set in textbox and values set when i uncheck the "Select All" checkbox

I want to get checkbox values in array so i am using map function,

Please see jquery on fiddle

fiddle here

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>

EDIT

Both codes are working

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

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

});

Check on fiddle 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(' '));
});

check on fiddle fiddle 3

Now my doubt is which one is better and correct ?

because i want to set background image for all checkbox, so I hide all checkboxes using css

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

And set background image for checkbox using following css code

Set Background for "Select All" Checkbox

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

Set Background for "child" Check boxes

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

so is it right ? to use hidden checkbox id and class in jquery

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

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

Upvotes: 2

Views: 421

Answers (3)

Vasimkhan
Vasimkhan

Reputation: 333

Instead of hiding checkbox you can assign negative margin to it.

Please refer below CSS snippet :

#form {overflow:hidden}

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

Also want to repeat what jonmrich has already said to switch "change to click" in the second argument for "#selectAll" checkbox.

Thanks

Upvotes: 0

charlietfl
charlietfl

Reputation: 171679

If you want the selectAll to toggle the checks on other checkboxes use prop() to do it. Using this.checked will indicate whether to check or uncheck them

$(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

Upvotes: 1

jonmrich
jonmrich

Reputation: 4323

Switch change to click in the second argument:

$(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(' '));


});

Upvotes: 3

Related Questions