Checkbox select deselect all and perform function

Question

I have a bunch of checkboxes that when clicked pass their value to a text area. I then have a checkbox that when clicked selects all the other checkboxes. This is all working fine. What I would like to do is have the checkboxes perform their functions when select all is clicked. It works at the moment, but only when I refresh the page. I would like it to happen when select all is clicked.

Here's what I've been playing with so far:

    function setAllCheckboxes(divId, sourceCheckbox) {
    divElement = document.getElementById(divId);
    inputElements = divElement.getElementsByTagName('input');
    for (i = 0; i < inputElements.length; i++) 
$('.checkbox').each(function() {
                this.checked = true;
                 this.click();              
            });
{
        if (inputElements[i].type != 'checkbox')
            continue;
        inputElements[i].checked = sourceCheckbox.checked;
    }
}

This cannot be the actual script, because this will trigger a syntax error: `Uncaught SyntaxError: Illegal continue statement` — Andreas, Feb 19 '17 at 12:18
Possible duplicate of [How can I trigger an onchange event manually?](http://stackoverflow.com/questions/2856513/how-can-i-trigger-an-onchange-event-manually) — sergdenisov, Feb 19 '17 at 12:19
Sorry if this is a duplicate. I did search, but obviously missed those. This part of the code I found in a comment section on another site I was reading to find the answer. `$('.checkbox').each(function() { this.checked = true; this.click(); });` I wasn't sure where it should go. — Greg, Feb 19 '17 at 12:33

sergdenisov · Accepted Answer · 2017-02-19T12:56:37.833

If you're already using jQuery, you could do it without loops, with jQuery's .on()/.trigger()/.change():

var $result = $('.js-result');
var $checkboxes = $('.js-checkbox');
$checkboxes.on('change', function(e) {
    var $checkbox = $(e.target);
    $result.append(
        '<div>' +
        $checkbox.closest('.js-label').text() + ' is ' +
        ($checkbox.prop('checked') ? 'checked' : 'unchecked') +
        '</div>'
    );
});
$('.js-button').on('click', function() {
    var $this = $(this);
    $checkboxes.prop('checked', !$this.data('checked'));
    $checkboxes.trigger('change');
    $this.data('checked', !$this.data('checked'))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label class="js-label">
    <input type="checkbox" class="js-checkbox"/>
    Checkbox 1
</label>
<label class="js-label">
    <input type="checkbox" class="js-checkbox"/>
    Checkbox 2
</label>
<label class="js-label">
    <input type="checkbox" class="js-checkbox"/>
    Checkbox 3
</label>
<button type="button" class="js-button">Check/uncheck all</button>

<div class="js-result"></div>

JSFiddle

score 0 · Answer 2 · answered Feb 19 '17 at 12:22

0

CheckBox should be handled with onchange event. Below code I am firing an event whenever the checkbox checked programmatically.

Below code may help you

    function setAllCheckboxes(divId, sourceCheckbox) {
    divElement = document.getElementById(divId);
    inputElements = divElement.getElementsByTagName('input');
    for (i = 0; i < inputElements.length; i++) 
$('.checkbox').each(function() {
                this.checked = true;
                 /* this.click(); */              
                 this.fireevent('onChange');
                 /* or you can call this.onChange(); */
            });
{
        if (inputElements[i].type != 'checkbox')
            continue;
        inputElements[i].checked = sourceCheckbox.checked;
    }
}

answered Feb 19 '17 at 12:22

I just tried the code you posted, it doesn't select any checkboxes. Not too flash at javascript sorry. – Greg Feb 19 '17 at 12:29
Could you post the html code as well for better understanding. – Feb 19 '17 at 12:30
It's just a bunch of these `
Data 1

Greg

Feb 19 '17 at 12:37

score 0 · Answer 3 · answered Feb 19 '17 at 13:20

In case you are using only java script. Below is the very simple running example. which consumes short time without any use of external library as JQuery

HTML code

<html>
    <head>
        <title>test</title>
        <script>
function amend(a)
{
document.getElementById("ta").value += a;
}

function checkAll()
{
var textboxes = document.getElementsByClassName("cb");
for(i=0;i<textboxes.length;i++)
{
textboxes[i].checked=true;
textboxes[i].onchange();
}

}

        </script>
    </head>
    <body>
        <textarea rows="4" cols="50" id="ta">
                Below the outputs
        </textarea>
        <div id="checkdiv">
            <input type="checkbox" onChange="amend(this.value)" value="data to add 1" class="cb">First</input>
            <br>
            <input type="checkbox" onChange="amend(this.value)" value="data to add 2" class="cb">Second</input>
            <br>
            <input type="checkbox" onChange="amend(this.value)" value="data to add 3" class="cb">Third</input>
            <br>
            <input type="checkbox" onChange="checkAll()">Check all</input>
        </div>
    </body>
</html>

Checkbox select deselect all and perform function

3 Answers3

Linked