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

时间:2016-05-02 13:07:36

标签: jquery html forms checkbox

我有一个基于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>

2 个答案:

答案 0 :(得分:2)

我要尝试的第一件事是使用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); 
}

答案 1 :(得分:0)

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

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