javascript - 按值或 ID 选择更多复选框

Question

我有这段代码，我想在其中创建一个切换按钮来选择 2 个或更多复选框，例如“意大利和德国”。

我正在尝试此代码，但无法使其工作

$(document).on('click', '.checkbox_button', function(e) {
  var $checks = $("input:checkbox[value=Italy]").attr("checked", true);
  var $checks = $("input:checkbox[value=Germany]").attr("checked", true);
  $checks.prop('checked', !$checks.is(':checked'))
  e.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox_option">
  <div class="icheckbox" style="position: relative;">
    <input class="checkbox_filter" type="checkbox" id="ffQHb" value="Italy">
    <input class="checkbox_filter" type="checkbox" id="ffQrt" value="Germany">
    <input class="checkbox_filter" type="checkbox" id="ffQzx" value="France">
  </div>
</div>
<a href="#" class="checkbox_button">Toggle</a>

感谢任何帮助。谢谢

Answer 1

您可以定义变量然后切换检查:

var check_germany = $("input:checkbox[value=Germany]");
var check_italy   = $("input:checkbox[value=Italy]");

check_germany.prop('checked', !check_germany.is(':checked'));
check_italy.prop('checked', !check_italy.is(':checked'));

希望这有帮助。

$(document).on('click', '.checkbox_button', function(e) {
  var check_germany = $("input:checkbox[value=Germany]");
  var check_italy   = $("input:checkbox[value=Italy]");
  
  check_germany.prop('checked', !check_germany.is(':checked'));
  check_italy.prop('checked', !check_italy.is(':checked'));
  
  e.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox_option">
  <div class="icheckbox" style="position: relative;">
    <input class="checkbox_filter" type="checkbox" id="ffQHb" value="Italy">
    <input class="checkbox_filter" type="checkbox" id="ffQrt" value="Germany">
    <input class="checkbox_filter" type="checkbox" id="ffQzx" value="France">
  </div>
</div>
<a href="#" class="checkbox_button">Toggle</a>

是的，您可以仅切换特定 div 的复选框，例如:

$(document).on('click', '.checkbox_button', function(e) {
  var check_germany = $(".checkbox_option2 input:checkbox[value=Germany]");
  var check_italy   = $(".checkbox_option2 input:checkbox[value=Italy]");
  
  check_germany.prop('checked', !check_germany.is(':checked'));
  check_italy.prop('checked', !check_italy.is(':checked'));
  
  e.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox_option1">
  <div class="icheckbox" style="position: relative;">
    <input class="checkbox_filter" type="checkbox" id="ffQHb" value="Italy">
    <input class="checkbox_filter" type="checkbox" id="ffQrt" value="Germany">
    <input class="checkbox_filter" type="checkbox" id="ffQzx" value="France">
  </div>
</div>
<div class="checkbox_option2">
  <div class="icheckbox" style="position: relative;">
    <input class="checkbox_filter" type="checkbox" id="ffQHb" value="Italy">
    <input class="checkbox_filter" type="checkbox" id="ffQrt" value="Germany">
    <input class="checkbox_filter" type="checkbox" id="ffQzx" value="France">
    <input class="checkbox_filter" type="checkbox" id="ffQzx" value="France">
  </div>
</div>
<a href="#" class="checkbox_button">Toggle</a>