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

Question

我发现this code使某些内容有多个复选框选择/取消选择。代码本身工作正常，但我希望它能够接受一个变量，所以我不需要在我的脚本中写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>

再次感谢你。

Answer 1

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

Answer 2

我认为你的架构基本上存在缺陷。使用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中没有变量可以搞乱，代码库永远不会改变。

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

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

2 个答案: