Estoy usando el método on() en jquery y quiero saber si es posible acortar mi código porque solo estoy usando el código una y otra vez pero con diferentes selectores secundarios. ¿Es posible usar múltiples selectores secundarios en uno on() ?
Este es un código de muestra y tengo muchos códigos como este.
$(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 }); } }); Quiero saber si es posible usar múltiples 'input[name*="create"]' en one on() para que no tenga que repetirlo.
Usar Selector Múltiple (“selector1, selector2, selectorN”)
$(document.body).on('change', 'input[name*="create"],input[name*="print"], input[name*="compute"]', function () { ... });Si va a utilizar las mismas líneas de función en varios lugares, declárelas en un solo nombre de función al principio. Entonces puedes llamarlo cuando lo necesites.
Para la parte de implementación, puede implementar un evento en varias clases con el selector css. (abajo)
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>Nunca hagas referencia de destino a otros elementos usando el nombre de clase de la persona que className . Un día agregará una clase de estilo a su elemento y su JS se romperá y le permitirá preguntarse.
En su lugar , utilice el atributo data-* para hacer referencia a:
<input type="checkbox" data-target="create"> Create<br> <input type="checkbox" data-target="compute"> Compute <br> <input type="checkbox" data-target="print"> Print<br>teniendo en cuenta que el ie: create anterior apuntará a todos
<input type="checkbox" name="create_selectall"> elementos, entonces esto es todo lo que necesita.
Realmente
$("body").on('change', 'input[data-target]', function() { $('input[name*="'+ this.dataset.target +'_selectall"]').prop({checked: !this.checked}); });