Tim Howey Tim Howey - 7 months ago 12
HTML Question

Why is this jquery function triggering once per page refresh?

I have a form that is created based on data in an SQL table. What it's doing it looking for all 'users' that are "Owners", "Managers" and "Staff". The user will be writing a survey and then sending it out to either groups of people, or individuals.

Within a div where id="surveyList", I have three header checkboxes with the names "All_Owners", "All_Managers" and "All_Staff". Under each of those headings are checkboxes with the names "Owners_#OwnerId#" (Where #OwnerId# is the unique ID in the table for that individual).

I'd like to allow the user creating the survey to be able to check the header checkboxes and have it check/uncheck all of the individual checkboxes under that header. Here is the jQuery I've built so far.

//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);
}
});


As it stands, this code is working twice per page. Clicking a header once will check off all the users under that heading, and then similarly, unchecking it does the same. It works like this (On and then Off) for all three headings, but fails to fire on subsequent clicks. I've placed an alert() between every single line of code, and it always fires properly.

Can anyone see what I'm missing and why it doesn't continue to work after the first On/Off? Thanks in advance.

EDIT:
For those asking for the HTML, there is a coldfusion output loop generating the checkboxes for the users.

<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

first thing I would try is instead of using attr try using prop

from:

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

to:

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