Select more checkbox by value or id

问题:

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>

Any help is appreciated. Thank you

回答1:

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'));

Hope this helps.

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

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>