Javascript 使用jQuery选择/取消选择变量、多个复选框

我发现“使某物具有多个复选框选择/取消选择”。代码本身运行良好，但我希望它能够接受一个变量，因此我不需要在脚本中编写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>

再次感谢您。

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

...

我认为您在这方面的架构存在根本缺陷。使用

onclick（）。对于jQuery，您应该使用它。利用类和数据属性以其他元素为目标

相反，请考虑：


//等待文档加载
$（文档）.ready（函数（）{
//对于具有此类的所有元素，请注意单击
$（'.js复选框组切换'）。打开（'click'，function（）{
//创建所单击内容的jquery对象
var$this=$（this）；
//查找所单击内容的选择器目标；
var target=$this.data（'group-target'）；
//查找所有选择器目标
var$目标=$（目标）；
//为所有目标分配单击内容的值
$targets.prop（“选中”）、$this.prop（“选中”）；
});
});

目标群体1

目标群体2

你好1

你好2

测试1

测试2

英语2

早餐1
删除处理程序中的
x
参数。传递一个对象。不是
locatebox
的'x'参数。我运行了你的代码，它给我这个错误
uncaughttypeerror:$（…）。prop不是第77行或
$（className）的函数。prop（“checked”，$（id）。is（'：checked'）这一行完全正确。您使用的是哪个版本的jQuery？谢谢，这非常有用。它唯一没有做的事情是，如果您取消选择其中一个Group on框，它不会取消选中Targets Group 1复选框。这只是一个概念证明。如果您了解这段代码的工作原理，就可以让它做任何您想做的事情。