On Click Button To check all the checkbox

Question

I am trying to check all the checkboxes and changing the name of the button.But the checkboxes are not checked. Here is the code i am trying to implement.

function js_select_all(btn){
    var tf = "on";

    if (btn.value == "Check All") {
        for (var i=0 ; i < document.formMassCheckIn.circSelected.length ; i++) {
            alert("check1");
            if(!(document.formMassCheckIn.circSelected[i].checked)) {
                alert("check2");
                document.formMassCheckIn.circSelected.checked = tf;
            }
        }
        btn.value ="Uncheck All";
    } else {
        for (var i=0 ; i < document.formMassCheckIn.circSelected.length ; i++) {
            alert("check3");
            if (!(document.formMassCheckIn.circSelected[i].checked)){
                alert("check4");
                document.formMassCheckIn.circSelected.checked = "";
            }
        }
        btn.value = "Check All";
        tf = "";
    } 
}

i think you missed index number while checking checkbox, instead of document.formMassCheckIn.circSelected.checked = tf; try document.formMassCheckIn.circSelected.checked[i] = tf; — muneebShabbir
– muneebShabbir, Commented Jan 6, 2017 at 10:25

Nitheesh · Accepted Answer · 2017-01-06 10:25:35Z

2

Use

document.formMassCheckIn.circSelected[i].checked = true;

for checking the checkbox

and

document.formMassCheckIn.circSelected[i].checked = false;

for unchecking it

answered Jan 6, 2017 at 10:25

Nitheesh

20.1k3 gold badges28 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joris · Accepted Answer · 2017-01-06 10:44:58Z

2

You can do it easily, check the code below

var button = document.querySelector('.btn');
button.addEventListener('click', () => {
  // Button Value
  (button.value == "check All") ? button.value = "uncheck All": button.value = "check All";

  // Checkbox
  var checkboxes = document.querySelectorAll('input[type=checkbox]');
  [].forEach.call(checkboxes, (checkbox) => {
    if (checkbox.checked)
      checkbox.removeAttribute('checked');
    else
      checkbox.setAttribute('checked', 'checked');
  });
});

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

<input type="button" class="btn" value="check All">

answered Jan 6, 2017 at 10:44

Joris

2,83618 silver badges21 bronze badges

Comments

Zakaria Acharki · Accepted Answer · 2017-01-06 10:44:27Z

You've missed the index [i] and also you should use true/false to check/uncheck the checkboxes :

document.formMassCheckIn.circSelected[i].checked = true;
//And
document.formMassCheckIn.circSelected[i].checked = false;

Also you shouldn't add the Logical NOT ! operator in the second condition for the Uncheck All should be :

if (document.formMassCheckIn.circSelected[i].checked)

Instead of :

if (!(document.formMassCheckIn.circSelected[i].checked)){

Or it will be never reached.

Hope this helps.

function js_select_all(btn){
  if (btn.value == "Check All") 
  {
    for (var i=0 ; i < document.formMassCheckIn.circSelected.length ; i++) {
      if(!document.formMassCheckIn.circSelected[i].checked)
        document.formMassCheckIn.circSelected[i].checked = true;
      
    }
    btn.value ="Uncheck All";
  } else 
  {
    for (var i=0 ; i < document.formMassCheckIn.circSelected.length ; i++) {
      if (document.formMassCheckIn.circSelected[i].checked)
        document.formMassCheckIn.circSelected[i].checked = false;
    }
    btn.value = "Check All";
  } 
}

<form name='formMassCheckIn'>
  <input type='checkbox' name='circSelected' /> Option 1
  <br>
  <input type='checkbox' name='circSelected' /> Option 2
  <br>
  <input type='checkbox' name='circSelected' /> Option 3
  <br><br> 
  <input type='button' value='Check All' onclick='js_select_all(this)'/> 
</form>

S R Chaitanya · Accepted Answer · 2017-01-06 15:56:00Z

0

I think the earlier posts already covered the answer.

I would like to point out that your question itself contains the answer.

if(!(document.formMassCheckIn.circSelected[i].checked))

You are checking for boolean in the above if statement. But inside the if block, you are setting string to the checked property of check box.

answered Jan 6, 2017 at 15:56

S R Chaitanya

7487 silver badges13 bronze badges

Comments

Arjun Kariyadan · Accepted Answer · 2017-01-06 17:08:20Z

0

You made a few mistakes in your function. Except everything good. I have rewritten your function to do same thing as you did and also cut offed some unwanted code.

function js_select_all(btn) {
    if (btn.value == "Check All") {
       for (var i = 0 ; i < document.formMassCheckIn.circSelected.length ; i++) {
           document.formMassCheckIn.circSelected[i].checked = true;
       }

       btn.value = "Uncheck All";
    } else {
        for (var i = 0 ; i < document.formMassCheckIn.circSelected.length ; i++) {
            document.formMassCheckIn.circSelected[i].checked = false;
        }

        btn.value = "Check All";
    } 
}

answered Jan 6, 2017 at 17:08

Arjun Kariyadan

4993 silver badges12 bronze badges

Collectives™ on Stack Overflow

On Click Button To check all the checkbox

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related