jQuery action on HTML Checkbox

Question

I am having a little bit of trouble understanding why my checkbox is not producing any action. I would appreciate any suggestion as to where my mistake occurred.

<!DOCTYPE html>

<head>
</head>

<body>
<form>
	<div id = "canada1"> <input type ="checkbox" name ="location" value ="canada"> Canada <br><div>
    <div id = "central_america1"> <input type ="checkbox" name ="location" value ="central_america"> Central America <br></div>
</form>

<script type = "text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>

<script type = "text/javascript">

	$(document).ready(function(){
		alert("this appears")

		$('#canada1').click(function() {

			if ($('#canada1').is(':checked')) {
				alert("Canada is checked");
				console.log("is this working?")
			};

		});
	});
</script>
</body>
</html>

if ($('#canada1').is(':checked')) How can a div be checked? — j08691
– j08691, Commented Jul 31, 2015 at 2:59

Norlihazmey Ghazali · Accepted Answer · 2015-07-31 02:54:08Z

1

It because you attach an event on div,not the checkbox itself then :checked is not applied to it. See code below, and test code snippet.

<!DOCTYPE html>

<head>
</head>

<body>
  <form>
    <div id="canada1">
      <input type="checkbox" name="location" value="canada">Canada
      <br>
      <div>
        <div id="central_america1">
          <input type="checkbox" name="location" value="central_america">Central America
          <br>
        </div>
  </form>

  <script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>

  <script type="text/javascript">
    $(document).ready(function() {
      alert("this appears")

      $('input[type="checkbox"]').click(function() {

        if ($(this).is(':checked')) {
          var myVal = $(this).val();
          alert(myVal + " is checked");
          console.log("is this working?")
        };

      });
    });
  </script>
</body>

</html>

answered Jul 31, 2015 at 2:54

Norlihazmey Ghazali

9,0701 gold badge26 silver badges42 bronze badges

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

1 Comment

Ray Storm Over a year ago

Thank you so much for the explanation! I am really new to jQuery and your help is very much appreciated!

Rohit Batta · Accepted Answer · 2015-07-31 03:15:33Z

0

div element doesn't contain property as 'checked', it is property of checkbox. if ($('#canada1').is(':checked'))

So, in your case, if you pass id='canada1' to checkbox and remove id from div, then your code will work.

<!DOCTYPE html>

<head>
</head>
<body>
  <form>
    <div id="canada1Div">
      <input id="canada1" type="checkbox" name="location" value="canada">Canada
      <br>
      <div>
        <div id="central_america1Div">
          <input id="central_america1" type="checkbox" name="location" value="central_america">Central America
          <br>
        </div>
  </form>

  <script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>

  <script type="text/javascript">
    $(document).ready(function(){
		alert("this appears")
		$('#canada1').click(function() {
			if ($('#canada1').is(':checked')) {
				alert("Canada is checked");
				console.log("is this working?")
			};

		});
	});
  </script>
</body>
</html>

answered Jul 31, 2015 at 3:15

Rohit Batta

4921 gold badge4 silver badges16 bronze badges

1 Comment

Ray Storm Over a year ago

Thanks! This was really helpful! :)

Collectives™ on Stack Overflow

jQuery action on HTML Checkbox

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related