jquery按类检查/取消选中所有

Question

但老实说，这让我很难过。我查看了互联网，但找不到适合我需要的解决方案

<div id="TOP123">Top</div>
<div id="BOT123">Bottom</div>

<script type="text/javascript">
$("#TOP123").on('click',function(){
    $(".TOP123").prop('checked', $(this).prop("checked"));
});
$("#BOT123").click(function() {
    $(".BOT123").prop('checked', $(this).prop("checked"));
});
</script>

<div id="ImageContainer">

<input type="checkbox" name="ImagePositions[123][0]" value="1" id="CEKPOS1123" class="CEKPOS1 TOP123 originalinput" />
<input type="checkbox" name="ImagePositions[123][1]" value="1" id="CEKPOS2123" class="CEKPOS2 TOP123 originalinput" />
<input type="checkbox" name="ImagePositions[123][2]" value="1" id="CEKPOS3123" class="CEKPOS3 TOP123 originalinput" />
<input type="checkbox" name="ImagePositions[123][3]" value="1" id="CEKPOS4123" class="CEKPOS4 BOT123 originalinput" />
<input type="checkbox" name="ImagePositions[123][4]" value="1" id="CEKPOS5123" class="CEKPOS5 BOT123 originalinput" />
<input type="checkbox" name="ImagePositions[123][5]" value="1" id="CEKPOS6123" class="CEKPOS6 BOT123 originalinput" />

</div>

我想要实现的是 Top Div(Button) 选中/取消选中 TOP123 类的所有复选框。 与底部 div 相同，按 BOT123 类检查/取消选中所有复选框 我尝试了很多变化，为什么 TOP 和 BOT 功能不同 谢谢你的帮助

Answer 1

使用此代码：

$("#TOP123").on('click', function() {
  $(".TOP123").prop('checked', !$(".TOP123").is(":checked"));
});
$("#BOT123").click(function() {
  $(".BOT123").prop('checked', !$(".BOT123").prop("checked"));
});

$(this).prop("checked") 是指您尝试将“按钮/div”设置为选中，而是使用!$(".TOP123").is(":checked") 它会询问.TOP123 复选框是否选中，然后将其反转。

工作演示

$("#TOP123").on('click', function() {
  $(".TOP123").prop('checked', !$(".TOP123").is(":checked"));
});
$("#BOT123").click(function() {
  $(".BOT123").prop('checked', !$(".BOT123").prop("checked"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="TOP123">Top</div>
<div id="BOT123">Bottom</div>

<div id="ImageContainer">

  <input type="checkbox" name="ImagePositions[123][0]" value="1" id="CEKPOS1123" class="CEKPOS1 TOP123 originalinput" />
  <input type="checkbox" name="ImagePositions[123][1]" value="1" id="CEKPOS2123" class="CEKPOS2 TOP123 originalinput" />
  <input type="checkbox" name="ImagePositions[123][2]" value="1" id="CEKPOS3123" class="CEKPOS3 TOP123 originalinput" />
  <input type="checkbox" name="ImagePositions[123][3]" value="1" id="CEKPOS4123" class="CEKPOS4 BOT123 originalinput" />
  <input type="checkbox" name="ImagePositions[123][4]" value="1" id="CEKPOS5123" class="CEKPOS5 BOT123 originalinput" />
  <input type="checkbox" name="ImagePositions[123][5]" value="1" id="CEKPOS6123" class="CEKPOS6 BOT123 originalinput" />

</div>

Answer 2

您需要遍历类并将选中状态切换到该类中的每个项目，

$("#TOP123").on('click',function(){
    $(".TOP123").each(function(){
      var checked = $(this).is(':checked');
       $(this).prop("checked", !checked)
    });
})


$("#BOT123").on('click',function(){
    $(".BOT123").each(function(){
      var checked = $(this).is(':checked');
       $(this).prop("checked", !checked)
    });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="TOP123">Top</div>
<div id="BOT123">Bottom</div>

<div id="ImageContainer">

<input type="checkbox" name="ImagePositions[123][0]" value="1" id="CEKPOS1123" onchange="Alterticketdata(\'123\')" class="CEKPOS1 TOP123 originalinput" />
<input type="checkbox" name="ImagePositions[123][1]" value="1" id="CEKPOS2123" onchange="Alterticketdata(\'123\')" class="CEKPOS2 TOP123 originalinput" />
<input type="checkbox" name="ImagePositions[123][2]" value="1" id="CEKPOS3123" onchange="Alterticketdata(\'123\')" class="CEKPOS3 TOP123 originalinput" />
<input type="checkbox" name="ImagePositions[123][3]" value="1" id="CEKPOS4123" onchange="Alterticketdata(\'123\')" class="CEKPOS4 BOT123 originalinput" />
<input type="checkbox" name="ImagePositions[123][4]" value="1" id="CEKPOS5123" onchange="Alterticketdata(\'123\')" class="CEKPOS5 BOT123 originalinput" />
<input type="checkbox" name="ImagePositions[123][5]" value="1" id="CEKPOS6123" onchange="Alterticketdata(\'123\')" class="CEKPOS6 BOT123 originalinput" />

</div>

Answer 3

你的问题是：

$(this).prop("checked")

$(this) 指的是您点击的 div，而不是复选框。

您可以改为：

!$(".TOP123").prop("checked"));

这会将您的复选框更改为与当前值相反的值。

请看下面的例子：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="TOP123">Top</div>
<div id="BOT123">Bottom</div>

<script type="text/javascript">
  $("#TOP123").on('click', function() {
    $(".TOP123").prop('checked', !$(".TOP123").prop("checked"));
  });
  $("#BOT123").click(function() {
    $(".BOT123").prop('checked', !$(".BOT123").prop("checked"));
  });
</script>

<div id="ImageContainer">

  <input type="checkbox" name="ImagePositions[123][0]" value="1" id="CEKPOS1123" onchange="Alterticketdata(\'123\')" class="CEKPOS1 TOP123 originalinput" />
  <input type="checkbox" name="ImagePositions[123][1]" value="1" id="CEKPOS2123" onchange="Alterticketdata(\'123\')" class="CEKPOS2 TOP123 originalinput" />
  <input type="checkbox" name="ImagePositions[123][2]" value="1" id="CEKPOS3123" onchange="Alterticketdata(\'123\')" class="CEKPOS3 TOP123 originalinput" />
  <input type="checkbox" name="ImagePositions[123][3]" value="1" id="CEKPOS4123" onchange="Alterticketdata(\'123\')" class="CEKPOS4 BOT123 originalinput" />
  <input type="checkbox" name="ImagePositions[123][4]" value="1" id="CEKPOS5123" onchange="Alterticketdata(\'123\')" class="CEKPOS5 BOT123 originalinput" />
  <input type="checkbox" name="ImagePositions[123][5]" value="1" id="CEKPOS6123" onchange="Alterticketdata(\'123\')" class="CEKPOS6 BOT123 originalinput" />

</div>

注意：检查是否将复选框更改为选中/取消选中的决定因素是每个组的第一个复选框（即第一个和第四个复选框）。