HenryDev HenryDev - 6 months ago 8
jQuery Question

How to create a single function that handles checkbox selection?

I'm working on this simple checkbox selection that works just fine when selecting a single row or selecting all the rows. However, I would like to have only one function that handles the checkbox selection. As of right now I have 3 functions called: customer_name_func , customer_lastname_func and customer_email_func. Can someone help me on this please? Here's my code that works just fine:



$(document).ready(function() {

$("#checkAll").change(function() {
$("input:checkbox").prop('checked', $(this).prop("checked"));
$(customer_name_func);
$(customer_lastname_func);
$(customer_email_func);
});

var customer_name_func = function() {
if ($("#customer-name-checkbox").is(":checked")) {
$('#customer-name-inputField').prop('disabled', false);
} else {
$('#customer-name-inputField').prop('disabled', 'disabled');
}
};
$(customer_name_func);
$("#customer-name-checkbox").change(customer_name_func);

var customer_lastname_func = function() {
if ($("#customer-lastname-checkbox").is(":checked")) {
$('#customer-lastname-inputField').prop('disabled', false);
} else {
$('#customer-lastname-inputField').prop('disabled', 'disabled');
}
};
$(customer_lastname_func);
$("#customer-lastname-checkbox").change(customer_lastname_func);

var customer_email_func = function() {
if ($("#customer-email-checkbox").is(":checked")) {
$('#customer-email-inputField').prop('disabled', false);
} else {
$('#customer-email-inputField').prop('disabled', 'disabled');
}
};
$(customer_email_func);
$("#customer-email-checkbox").change(customer_email_func);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<input type="checkbox" id="checkAll" />Select All
<br/>
<input type="checkbox" id="customer-name-checkbox" name="customer-name-checkbox" value="yes">
<!---echo php customerName value from WS--->
<label for="pizza">Name&nbsp;&nbsp; LastName&nbsp;&nbsp; Phone Number</label>
<input type="email" name="name" id="customer-name-inputField" />
<br/>
<br/>

<input type="checkbox" id="customer-lastname-checkbox" name="customer-lastname-checkbox" value="yes">
<!---echo php customerLastName value from WS--->
<label for="pizza">Name&nbsp;&nbsp; LastName&nbsp;&nbsp; Phone Number</label>
<input type="email" name="email" id="customer-lastname-inputField" />
<br/>
<br/>

<input type="checkbox" id="customer-email-checkbox" name="customer-email-checkbox" value="yes">
<!---echo php customerPhoneNumber value from WS--->
<label for="pizza">Name&nbsp;&nbsp; LastName&nbsp;&nbsp; Phone Number</label>
<input type="email" name="email" id="customer-email-inputField" />
<br/>
<br/>

<input type="submit" value="Send" />
</form>




Answer
  1. Use HTML-5 data-* attribute to store custom information on the element.

    Add data-target attribute on each checkbox and the value of this attribute should be the corresponding textbox ID

    data-target="customer-name-inputField" name="customer-name-checkbox" value="yes"
    
  2. Add a common class to all the checkboxes.

    class="myCheckbox"
    
  3. Bind events on all the checkboxes using the common class.

    $('.myCheckbox').change(function() {
    
  4. Inside event handler use $(this) and data() to get the elements data-* attribute value.

    $(this).data('target')
    
  5. Use trigger('change') to trigger the change event on the checkboxes.

Live Demo:

$(document).ready(function() {

  $("#checkAll").change(function() {
    $('.myCheckbox').prop('checked', this.checked).trigger('change');
  });

  $('.myCheckbox').change(function() {
    $('#' + $(this).data('target')).prop('disabled', !this.checked);
  }).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div>
    <input type="checkbox" id="checkAll" />Select All

    <input type="checkbox" id="customer-name-checkbox" data-target="customer-name-inputField" name="customer-name-checkbox" value="yes" class="myCheckbox">
    <label for="pizza">Name&nbsp;&nbsp; LastName&nbsp;&nbsp; Phone Number</label>
    <input type="email" name="name" id="customer-name-inputField" />
  </div>

  <div>
    <input type="checkbox" id="customer-lastname-checkbox" data-target="customer-lastname-inputField" name="customer-lastname-checkbox" value="yes" class="myCheckbox">
    <label for="pizza">Name&nbsp;&nbsp; LastName&nbsp;&nbsp; Phone Number</label>
    <input type="email" name="email" id="customer-lastname-inputField" />
  </div>
  <div>
    <input type="checkbox" id="customer-email-checkbox" data-target="customer-email-inputField" name="customer-email-checkbox" value="yes" class="myCheckbox">
    <!---echo php customerPhoneNumber value from WS--->
    <label for="pizza">Name&nbsp;&nbsp; LastName&nbsp;&nbsp; Phone Number</label>
    <input type="email" name="email" id="customer-email-inputField" />
  </div>
  <input type="submit" value="Send" />
</form>

Comments