Question

但是说实话，这让我感到难过。我查看了Interweb，但找不到适合我需求的解决方案

<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的所有复选框。与Bottom div相同，按类别BOT123选中/取消选中所有复选框我尝试了很多变化，为什么TOP和BOT功能不同谢谢您的帮助

Answer 1

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

$("#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 2

您的问题是：

$(this).prop("checked")

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

相反，您可以将其（以及“ .BOT123”的后缀之一）更改为：

!$(".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>

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

Answer 3

使用此代码：

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

$(this).prop("checked")表示您试图将“ button / div”设置为“ checked”，但是使用!$(".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>

jQuery检查/取消所有按类

3 个答案: