CODEWITHSUNDEEP
javascript
Mahi
Mahi

Reputation: 73

On Click Button To check all the checkbox

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

Upvotes: 3

Views: 1569

Answers (5)

Arjun Kariyadan
Arjun Kariyadan

Reputation: 499

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

Upvotes: 0

S R Chaitanya
S R Chaitanya

Reputation: 748

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.

Upvotes: 0

Joris
Joris

Reputation: 2796

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">

Upvotes: 2

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

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>

Upvotes: 1

Nitheesh
Nitheesh

Reputation: 20016

Use 

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

for checking the checkbox

and 

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

for unchecking it

Upvotes: 2

Related Questions