Tengo una función Javascript/Jquery que controla grupos de casillas de verificación.
Las casillas de verificación se crean en el formulario PHP a partir de una llamada a la base de datos, por lo que reviso iterativamente un conjunto de registros y creo casillas de verificación en html.
Para cada casilla de verificación, le asigno una clase de "grupo de casillas de verificación" + un identificador numérico para crear un grupo de registros "me gusta". Termino con varias casillas de verificación como esta:
<tr class="tablebody"> <td><input name="contactresolveid2048" id="contactresolveid2048" type="checkbox" class="checkboxgroup0"/></td> <td>David Smith</td> </tr> <tr class="tablebody"> <td><input name="contactresolveid19145" id="contactresolveid19145" type="checkbox" class="checkboxgroup0"/></td> <td>graham Foots</td> </tr> <tr class="tablebody"> <td><input name="contactresolveid19146" id="contactresolveid19146" type="checkbox" class="checkboxgroup0"/></td> <td>Tom Silly</td> </tr>Como puede ver, estas 3 casillas de verificación tienen una clase de 'checkboxgroup0'
La siguiente función detecta un clic en CUALQUIERA de los grupos de casillas de verificación en un formulario (de los cuales puede haber muchos) y desmarca las casillas de verificación (que pertenecen al mismo grupo) que no son en las que se hizo clic.
$('[class^="checkboxgroup"]').click(function() { var thisClass = $(this).attr('class'); var $checkboxgroup = $('input.'+thisClass); $checkboxgroup.filter(':checked').not(this).prop('checked', false); });En la mayoría de las circunstancias, esto funciona bien cuando la única clase es 'checkboxgroup0'.
Sin embargo, cuando se lleva a cabo la validación, JQuery validate agrega una clase 'válida' o 'error' a la lista de clases de cualquier campo que pase o falle la validación, por lo que puedo terminar teniendo un .attr (clase) de 'checkboxgroup0 valid'.
Mi pregunta es esta:
¿Cómo devuelvo el nombre de clase completo de la clase parcialmente seleccionada SIN clases extrañas?
Al usar el selector $('[class^="checkboxgroup"]') necesito la parte completa de ese selector 'checkboxgroup0' y ninguna otra clase que se le pueda asignar.
Este problema que ha encontrado es una de las razones por las que el uso de atributos de id/clase incrementales no es una buena práctica.
Para solucionar este problema con su JS, puede usar la misma clase en cada casilla de verificación. Luego puede agruparlos por un atributo de data en su lugar. El uso de este método significa que el número de clases en un elemento o su posición dentro de la cadena de atributos de class no importa.
Prueba este ejemplo:
$('.checkboxgroup').click(function() { let $this = $(this); let $group = $(`.checkboxgroup[data-group="${$this.data('group')}"]`); $group.not(this).prop('checked', false); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr class="tablebody"> <td><input name="contactresolveid2048" id="contactresolveid2048" type="checkbox" class="checkboxgroup" data-group="0" /></td> <td><label for="contactresolveid2048">David Smith</label></td> </tr> <tr class="tablebody"> <td><input name="contactresolveid19145" id="contactresolveid19145" type="checkbox" class="checkboxgroup" data-group="0" /></td> <td><label for="contactresolveid19145">graham Foots</label></td> </tr> <tr class="tablebody"> <td><input name="contactresolveid19146" id="contactresolveid19146" type="checkbox" class="checkboxgroup" data-group="0" /></td> <td><label for="contactresolveid19146">Tom Silly</label></td> </tr> </table> Sin embargo , vale la pena señalar que lo que está intentando hacer se puede lograr mucho mejor usando solo HTML. Simplemente use una entrada de radio y asígneles a todos el mismo atributo de name , luego obtendrá el comportamiento que está tratando de crear de forma gratuita:
<table> <tr class="tablebody"> <td><input name="contactresolve" id="contactresolveid2048" type="radio" /></td> <td><label for="contactresolveid2048">David Smith</label></td> </tr> <tr class="tablebody"> <td><input name="contactresolve" id="contactresolveid19145" type="radio" /></td> <td><label for="contactresolveid19145">graham Foots</label></td> </tr> <tr class="tablebody"> <td><input name="contactresolve" id="contactresolveid19146" type="radio" /></td> <td><label for="contactresolveid19146">Tom Silly</label></td> </tr> </table>