CODEWITHSUNDEEP
javascriptcheckbox
Maulik
Maulik

Reputation: 97

Checkbox - Getting multiple check boxes checked on checking only one

I am trying to implement a check box which checks all the check boxes on the page. But when I changed the code slightly, it stopped working. I want to keep the changed code and still want the functionality to be working. Kindly help! * Kindly ignore the missing tags if any. It is correct unless I made mistake in editing the question.

   <script>     
    function toggle(source) {
        checkboxes = document.getElementsByName('qchecked[]');
        for(var i=0, n=checkboxes.length;i<n;i++){
            checkboxes[i].checked = source.checked;
        }
    }
</script>
<html> 
/* Code for the check box which when checked, checks all the checkbox. */
<input type='checkbox' class='css-checkbox' id='checkbox' onClick='toggle(this)'/>
<label for='checkbox' class='css-label lite-y-green'></label>



    /* Code for the check boxes which should be checked when the check box with id=checkbox is checked. 
I changed the code from INITIAL CODE to CHANGED CODE for some other purpose and the toggle stopped working. 
Now clicking on that one check box is not marking or un marking all the check boxes. */

    <!-- INITIAL CODE -->
    <input type='checkbox' id='yes_checkbox[$index]' class='css-checkbox' name='qchecked[]'/>
    <label for='yes_checkbox[$index]' class='css-label lite-y-green'></label>

    <!-- CHANGED CODE -->
    <input type='checkbox' id='yes_checkbox[$index]' class='css-checkbox' name='qchecked[$array6[qID]]'/>
    <label for='yes_checkbox[$index]' class='css-label lite-y-green'></label>
    </html>

Upvotes: 0

Views: 1136

Answers (3)

freak007
freak007

Reputation: 88

Instead of name, give a class to all elements and you should use by 

getElementsByClassName('your_class');

Upvotes: 2

Deenadhayalan Manoharan
Deenadhayalan Manoharan

Reputation: 5444

Try this..

<ul class="chk-container">
<li><input type="checkbox" id="selecctall"/> Selecct All</li>
<li><input class="checkbox1" type="checkbox" name="check[]" value="item1"> This is Item 1</li>
<li><input class="checkbox1" type="checkbox" name="check[]" value="item2"> This is Item 2</li>
<li><input class="checkbox1" type="checkbox" name="check[]" value="item3"> This is Item 3</li>
<li><input class="checkbox1" type="checkbox" name="check[]" value="item4"> This is Item 4</li>
<li><input class="checkbox1" type="checkbox" name="check[]" value="item5"> This is Item 5</li>
<li><input class="checkbox1" type="checkbox" name="check[]" value="item6"> This is Item 6</li>
<li><input class="checkbox2" type="checkbox" name="check[]" value="item6"> Do not select this</li>
</ul>

$(document).ready(function() {
    $('#selecctall').click(function(event) {  //on click 
        if(this.checked) { // check select status
            $('.checkbox1').each(function() { //loop through each checkbox
                this.checked = true;  //select all checkboxes with class "checkbox1"               
            });
        }else{
            $('.checkbox1').each(function() { //loop through each checkbox
                this.checked = false; //deselect all checkboxes with class "checkbox1"                       
            });         
        }
    });

});

demo:https://jsfiddle.net/go1gL743/

Upvotes: 0

Zee
Zee

Reputation: 8488

Since you name of inputs are different, you can make use of common class

checkboxes = document.getElementsByClassName('css-checkbox');

Upvotes: 1

Related Questions