Multiple child selectors in on () Javascript
I am using the on () method in jquery and I want to know if my code can be shortened because I am just using the code over and over, but with different child selectors. Can multiple child selectors be used 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 is possible to use multiple 'input[name*="create"]'
in one on()
so I don't have to repeat it.
source to share
Use Multiple selectors ("selector1, selector2, selectorN")
$(document.body).on('change', 'input[name*="create"],input[name*="print"], input[name*="compute"]', function () {
...
});
source to share
If you are going to use the same function strings in multiple places, first declare it with the same function name. Then you can call it when you need it.
For the implementing part, you can implement one event for multiple classes using 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>
source to share
Never link to targeted links to other items using the caller className
. One day you add a style class to your element and your JS will break and let you wonder.
Instead of Use attribute data-*
for link:
<input type="checkbox" data-target="create"> Create<br>
<input type="checkbox" data-target="compute"> Compute <br>
<input type="checkbox" data-target="print"> Print<br>
given that ie: create above will target everything
<input type="checkbox" name="create_selectall">
than that's all you need.
In fact.
$("body").on('change', 'input[data-target]', function() {
$('input[name*="'+ this.dataset.target +'_selectall"]').prop({checked: !this.checked});
});
source to share
You can create an event that attaches the event to the elements in the dom and applies the required 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" />
source to share