按值或ID选择更多复选框 [英] Select more checkbox by value or id

问题描述

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

I have this code, where I want to create a toggle button to select 2 or more checkboxes, for example, "Italy and Germany".

我正在尝试这段代码，但无法正常工作

I'm trying this code but I can not make it work

$(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>

感谢您的帮助.谢谢

推荐答案

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

You could define the variables then toggle the check :

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的复选框，例如:

Yes you could toggle just the checkboxes of specific div like :

$(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>

这篇关于按值或ID选择更多复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！