check if a checkbox is checked without using jquery? [duplicate]

Question

I have form on page1.php:

<form method="POST" action="page2.php">
<input type="checkbox" name="F10" id="f10">
<input type="checkbox" name="W10" id="w10">
<input type="checkbox" name="F20" id="f20">
<input type="checkbox" name="W20" id="w20">
<input type="checkbox" name="F30" id="f30">
<input type="checkbox" name="W30" id="w30">
</form>

I want to diable a checkbox if another checkbox is checked using javascript or XMLHttpRequest(). I tried doing it using javascript but it didn't work.

if(document.getElementById("f10").checked){
   document.getElementById("w20").disabled=true;
}

@Zach Saucier The thing is I can't use jquery in my project. — zeee9
– zeee9, Commented Nov 27, 2014 at 3:37

Harrison Pickering · Accepted Answer · 2014-11-26 23:59:02Z

39

You can use regular javascript to get a true or false value for checked for example,

var isChecked= document.getElementById('elementName').checked;
if(isChecked){ //checked
  //execute code here
}else{ //unchecked
  //execute code here
}

or if you want whenever the checkbox check is changed

var checkbox = document.getElementById('elementName');
checkbox.addEventListener("change", functionname, false);

function functionname(){
  var isChecked = checkbox.checked;
  if(isChecked){ //checked

  }else{ //unchecked

  }
}

answered Nov 26, 2014 at 23:59

Harrison Pickering

5654 silver badges9 bronze badges

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

1 Comment

trane77 Over a year ago

This may work, but would be better to determine the checked value from the incoming event, instead of calling the external selector. This way you can watch any element firing the event with a single check. It's possible by accessing e.target.checked in functionname (e is the event that must be passed to this function)

Enzo Zapata · Accepted Answer · 2014-11-26 23:50:00Z

1

can you try my code? it may help you :D

<form onclick="checkIfChecked()" method="POST" action="page2.php">

<input type="checkbox" name="F10" id="f10">F10
<input type="checkbox" name="W10" id="w10">W10
<input type="checkbox" name="F20" id="f20">F20
<input type="checkbox" name="W20" id="w20">W20
<input type="checkbox" name="F30" id="f30">F30
<input type="checkbox" name="W30" id="w30">W30
</form>

<script>
function checkIfChecked(){
    if(document.getElementById("f10").checked){
   document.getElementById("w20").disabled=true;
    } else {
  document.getElementById("w20").disabled=false;
   }
}
</script>

answered Nov 26, 2014 at 23:50

Enzo Zapata

1711 silver badge7 bronze badges

Comments

ATechGuy · Accepted Answer · 2014-11-26 23:26:35Z

0

The purpose of a check box is for multiple selections, use radio buttons if you only want one selection available

answered Nov 26, 2014 at 23:26

ATechGuy

1,2809 silver badges14 bronze badges

1 Comment

zeee9 Over a year ago

No, I want multiple selections to be available . But I want one specific checkbox to be disabled if another is checked.

Ellie · Accepted Answer · 2014-11-26 23:31:00Z

0

You can use the checked pseudo class but note lack of browser support for IE 8 if that matters to you. http://css-tricks.com/almanac/selectors/c/checked/

answered Nov 26, 2014 at 23:31

Ellie

191 bronze badge

Collectives™ on Stack Overflow

check if a checkbox is checked without using jquery? [duplicate]

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Linked

Related