一个变量，多个复选框选择/取消选择 jQuery

A variable, Multiple Checkbox Select/Deselect using jQuery

本文关键字：选择 复选框 取消 jQuery 一个 变量      更新时间：2023-09-26

我发现这段代码可以使某些东西有多个复选框选择/取消选择。代码本身工作正常，但我希望它能够接受一个变量，这样我就不需要在我的脚本中写 20 次。

现在是什么样子的：

$(function(){
// add multiple select / deselect functionality
$("#selectcase").click(function () {
      $('.case').attr('checked', this.checked);
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function(){
    if($(".case").length == $(".case:checked").length) {
        $("#selectcase").attr("checked", "checked");
    } else {
        $("#selectcase").removeAttr("checked");
    }
});

我想吸收什么：

function locatebox(x){
console.log(x);
// add multiple select / deselect functionality
$("#select" + x).click(function(x) {
      $("." + x ).attr("checked", this.checked);
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$("." + x ).click(function(x){
    if($("." + x).length == $("." + x + ":checked").length) {
        $("#select" + x ).attr("checked", "checked");
    } else {
        $("#select" + x).removeAttr("checked");
    }
});
//locatebox("rase");
}
locatebox("rase");

当我查看执行的代码时，它显示已生成 rase 函数，但它没有选中任何框。

感谢任何可能帮助我的人。

编辑：我必须显示我如何调用它以及复选框值将是什么。

我不知道这是否是正确的调用JavaScript。

调用多选复选框：

<td><input type="checkbox" id="selectrase" onclick="locatebox('rase');"/></td>

定义一个复选框：

<td align="center"><input type="checkbox" class="rase" name="rase" value="3"/></td>
<td align="center"><input type="checkbox" class="rase" name="rase" value="4"/></td>

再次感谢您。

我认为您的架构存在根本缺陷。 使用 onclick() 和 jQuery 可以进行非常困难的调试。 对于 jQuery，您应该使用 prop() . 利用类和数据属性来定位其他元素。

相反，请考虑：

// Wait for the document to load
$(document).ready(function(){
  // for all elements that have this class watch for clicks
  $('.js-checkbox-group-toggle').on('click', function(){
    // create jquery object of what was clicked
    var $this = $(this);
    // find the selector target for what was clicked;
    var target = $this.data('group-target');
    // find all the selector targets
    var $targets = $(target);
    // assign all the targets the value of what was clicked
    $targets.prop("checked", $this.prop("checked"));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="js-checkbox-group-toggle" data-group-target=".group1" />Targets Group 1<br />
<input type="checkbox" class="js-checkbox-group-toggle" data-group-target=".group2" />Targets Group 2<br />
<input type="checkbox" class="group1" />Hello 1<br />
<input type="checkbox" class="group2" />Hello 2<br />
<input type="checkbox" class="group1" />Test 1<br />
<input type="checkbox" class="group2" />Test 2<br />
<input type="checkbox" class="group2" />English 2<br />
<input type="checkbox" class="group1" />Breakfast 1<br />

根据需要添加任意数量的变量，JS中没有变量可以弄乱，并且代码库永远不必更改。

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<td><input type="checkbox" id="selectrase" /></td>
<td align="center"><input type="checkbox" class="rase" name="rase" value="3"/></td>
<td align="center"><input type="checkbox" class="rase" name="rase" value="4"/></td>
...
<script type="text/javascript"><!--
function locatebox(x){
console.log(x);
// add multiple select / deselect functionality
var id = "#select" + x;
var className = '.' + x;
$(id).click(function(x) {
      $(className).prop("checked", $(id).is(':checked'));
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(className).click(function(){
      $(id).prop("checked", ($(className).length == $(className + ":checked").length));
   });
}
$(document).ready(function(){
    locatebox("rase");
}) ; 
//--></script>
相关文章：