按值或 id 选择更多复选框答案

【问题标题】：Select more checkbox by value or id按值或 id 选择更多复选框
【发布时间】：2017-01-14 20:32:39
【问题描述】：

我有这段代码，我想在其中创建一个切换按钮来选择 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>

感谢任何帮助。谢谢

【问题讨论】：

标签： javascript jquery wordpress

【解决方案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>

【讨论】：