Question

我有两个div，每个都有嵌套的复选框。如果在第一个和第二个中单击一个复选框，我基本上想要触发警报，但我似乎无法达到该范围。复选框是类。

＆＃13;

if ($("#result1 .tb2:checked").length == 1 && ($("#result2 .tb4:checked").length == 1  ) {
    alert("both clicked");
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="result1">
<input type="checkbox" class="tb1" />&nbsp;&nbsp;Yes<br><input type="checkbox"class="tb2" />&nbsp;&nbsp;No<br><br></div><br>
    
</div>
    
    
    
 <div id="result2">
<input type="checkbox" class="tb3" />&nbsp;&nbsp;Yes<br><input type="checkbox"class="tb4" />&nbsp;&nbsp;No<br><br></div><br>
    
</div>

＆＃13;

Answer 1

您应该有一个按钮，并将click事件处理程序绑定到它。您使用each遍历两个div并计算已检查项目的数量。为此，您可以使用:checked选择器。

$("button").on("click", function() {
    $("div").each(function() {
        if ($(this).find("input:checked").length === 2) {
            alert("Both checked");
        }
    });
});

http://jsfiddle.net/sjygn4t1/

Answer 2

您需要将测试放在事件处理程序中，因此只要更改了复选框，它就会运行。

$(":checkbox").click(function() {
  if ($("#result1 .tb2").is(":checked") && $("#result2 .tb4").is(":checked")) {
    $("#output").text("both clicked");
  } else {
    $("#output").empty();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="result1">
  <input type="checkbox" class="tb1" />&nbsp;&nbsp;Yes
  <br>
  <input type="checkbox" class="tb2" />&nbsp;&nbsp;No
  <br>
  <br>
</div>
<br>

</div>


<div id="result2">
  <input type="checkbox" class="tb3" />&nbsp;&nbsp;Yes
  <br>
  <input type="checkbox" class="tb4" />&nbsp;&nbsp;No
  <br>
  <br>
</div>
<br>

</div>
<div id="output"></div>

检查是否使用jquery触发嵌套复选框

2 个答案: