Question

我在理解为什么我的复选框没有产生任何动作时遇到了一些麻烦。如果我的错误发生在哪里，我将不胜感激。

＆＃13;

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

＆＃13;

Answer 1

这是因为您在getProjectForm上附加了一个事件，而不是复选框本身，因此div不适用于该事件。请参阅下面的代码，并测试代码段。

＆＃13;

:checked

＆＃13;

Answer 2

div元素不包含'checked'属性，它是checkbox的属性。 if ($('#canada1').is(':checked'))

所以，在你的情况下，如果你将id ='canada1'传递给复选框并从div中删除id，那么你的代码就可以了。

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

HTML Checkbox上的jQuery操作

2 个答案: