CODEWITHSUNDEEP
javascriptjquery
user3606724
user3606724

Reputation:

Multiple Child selector in on() Javascript

I am using the on() method in jquery and I want to know if it's possible to shorten my code because I am just using the code over and over again but with different child selectors. Is it possible to use multiple child selectors in one on()?

This is a sample code and I have a lot of code like this.

$(document.body).on('change', 'input[name*="create"]', function() {
  var $class = $(this).attr('class');
  if (!$(this).is(':checked')) { //not checked
    $('input[name*="' + $class + '_selectall"]').attr({
      'checked': false
    });
  } else {
    $('input[name*="' + $class + '_selectall"]').attr({
      'checked': true
    });
  }
});

$(document.body).on('change', 'input[name*="compute"]', function() {
  var $class = $(this).attr('class');
  if (!$(this).is(':checked')) { //not checked
    $('input[name*="' + $class + '_selectall"]').attr({
      'checked': false
    });
  } else {
    $('input[name*="' + $class + '_selectall"]').attr({
      'checked': true
    });
  }
});

$(document.body).on('change', 'input[name*="print"]', function() {
  var $class = $(this).attr('class');
  if (!$(this).is(':checked')) { //not checked
    $('input[name*="' + $class + '_selectall"]').attr({
      'checked': false
    });
  } else {
    $('input[name*="' + $class + '_selectall"]').attr({
      'checked': true
    });
  }
});

I want to know if it's possible to use multiple 'input[name*="create"]' in one on() so that I won't have to repeat it.

Upvotes: 3

Views: 1442

Answers (4)

Demeter Dimitri
Demeter Dimitri

Reputation: 618

If you are going to use the same function lines in multiple places, declare it to a single function name at first. Then you can call it whenever you need it.

For the implementing part, you can implement one event to multiple classes with css selector. (below)

function dotheAction(e) {
  var $class = $(e).attr('class');
  if (!$(this).is(':checked')) { //not checked
    $('input[name*="' + $class + '_selectall"]').attr({
      'checked': false
    });
  } else {
    $('input[name*="' + $class + '_selectall"]').attr({
      'checked': true
    });
  }
};

$(document.body).on('change', 'input[name*="create"], input[name*="compute"], input[name*="print"]', dotheAction(this));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206008

Never target-reference other elements by using the caller's className. One day you'll add a styling class to your element and your JS will break and let you wondering.

Instead Use data-* attribute to reference:

<input type="checkbox" data-target="create"> Create<br>
<input type="checkbox" data-target="compute"> Compute <br>
<input type="checkbox" data-target="print"> Print<br>

considering that the i.e: create above will target all

<input type="checkbox" name="create_selectall">

elements, than this is all you need.
Really.

$("body").on('change', 'input[data-target]', function() {
  $('input[name*="'+ this.dataset.target +'_selectall"]').prop({checked: !this.checked});
});

Upvotes: 0

smarber
smarber

Reputation: 5074

You can event create a function that attaches event to elements in the dom and applies a the wanted callback.

   function attachEvent(eventName, selector, callback) {
        $(document).on(eventName, selector, callback);
    }

    var changeCallback = function () {
            var className = $(this).attr('class');
            
            console.info(className);
            
            if (!$(this).is(':checked')) { //not checked
                $('input[name*="' + className + '_selectall"]').attr({
                    'checked': false
                });
            } else {
                $('input[name*="' + className + '_selectall"]').attr({
                    'checked': true
                });
            }
        };

    attachEvent('change', 'input[name*="create"],input[name*="compute"],input[name*="print"]', changeCallback);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="create" class="create" placeholder="create" type="text" />
<input name="compute" class="compute" placeholder="compute" type="text" />
<input name="print" class="print" placeholder="print" type="text" />

Upvotes: -1

Satpal
Satpal

Reputation: 133403

Use Multiple Selector (“selector1, selector2, selectorN”)

$(document.body).on('change', 'input[name*="create"],input[name*="print"], input[name*="compute"]', function () {
    ...
});

Upvotes: 3

Related Questions