Question

我有一个基于SQL表中的数据创建的表单。它正在寻找所有“用户”，即“业主”，“经理人”和“员工”。用户将编写调查，然后将其发送给任意一组人或个人。

在id =“surveyList”的div中，我有三个标题复选框，名称为“All_Owners”，“All_Managers”和“All_Staff”。在每个标题下都有名称为“Owners_＃OwnerId＃”的复选框（其中＃OwnerId＃是表中该个人的唯一ID）。

我想允许创建调查的用户能够检查标题复选框，并选中/取消选中该标题下的所有单独复选框。这是我到目前为止构建的jQuery。

//Another post lead me to target the input box this way, but same issue.
$("#surveyList").on("click", "input[name*='All_']", function (){
  var $this = $(this);
  //This grabs the value "Owner", "Manager" or "Staff"
  var sectionChecked = $this.attr("name").replace("All_", "");

  //Check if the header is checked, and then apply that value to each of the individuals that matches that heading.     
  if ( $this.is(":checked") ) {
    $("input[name*='" + sectionChecked + "_']").attr("checked", true);  
  } else {
    $("input[name*='" + sectionChecked + "_']").attr("checked", false); 
  }
});

目前，这段代码每页工作两次。单击标题一次将检查该标题下的所有用户，然后同样取消选中它也会执行相同操作。对于所有三个标题，它的工作方式（开启然后关闭），但无法触发后续点击。我在每一行代码之间放置了一个alert（），它总是正常触发。

任何人都可以看到我错过了什么以及为什么它在第一次开/关后不能继续工作？提前谢谢。

编辑：对于那些要求HTML的人，有一个coldfusion输出循环为用户生成复选框。

<div id="surveyList">
  <input type="checkbox" name="All_Owners" value="1"></td>

  <cfoutput query="qGetOwners">
    <input type="checkbox" name="Owners_#qGetOwners.id#" value="1"></td>
  </cfoutput>

  <input type="checkbox" name="All_Managers" value="1"></td>

  <cfoutput query="qGetManagers">
    <input type="checkbox" name="Managers_#qGetManagers.id#" value="1"></td>
  </cfoutput>

  <input type="checkbox" name="All_Staff" value="1"></td>

  <cfoutput query="qGetStaff">
    <input type="checkbox" name="Staff_#qGetStaff.id#" value="1"></td>
  </cfoutput>

</div>

Answer 1

我要尝试的第一件事是使用attr而不是prop尝试。

更改您的代码：

if ( $this.is(":checked") ) {
  $("input[name*='" + sectionChecked + "_']").attr("checked", true);  
} else {
  $("input[name*='" + sectionChecked + "_']").attr("checked", false); 
}

为：

if ( $this.is(":checked") ) {
  $("input[name*='" + sectionChecked + "_']").prop("checked", true);  
} else {
  $("input[name*='" + sectionChecked + "_']").prop("checked", false); 
}

Answer 2

听起来好像点击在DOM树中冒泡并且发射的次数比你想要的多。试着看stopPropagation。您可以像这样使用它：

$("#surveyList").on("click", "input[name*='All_']", function (event){
    event.stopPropagation();
    var $this = $(this);
    // .. the rest of your code
});

为什么每个页面刷新时这个jquery函数会触发一次？

2 个答案: