Javascript / Jquery extract whole CLASS descriptor from a partial selection descriptor

Question

I have a Javascript / Jquery function that controls groups of checkboxes.

The checkboxes are created on PHP form from a database call so I am iteratively going through a recordset and creating checkboxes in html.

For each checkbox I assign it a class of "checkboxgroup" + a numeric identifier to create a group of 'like' records. I end up with multiple checkboxes like this:

    
        
        David Smith
    
    
        
        graham Foots
    
    
        
        Tom Silly

As you can see, these 3 checkboxes have a class of 'checkboxgroup0'

The following function detects a click on ANY of the checkbox groups on a form (of which there may be many) and unchecks any checkboxes (belonging to the same group) that are not the clicked one.

    $('[class^="checkboxgroup"]').click(function() {
        var thisClass = $(this).attr('class');
        var $checkboxgroup = $('input.'+thisClass);
        $checkboxgroup.filter(':checked').not(this).prop('checked', false);
    });

Under most circumstances this works fine when the only class is 'checkboxgroup0'.

However when validation takes place JQuery validate appends a 'valid' or 'error' class to the class list of any fields that pass or fail validation, so I can endup having an .attr(class) of 'checkboxgroup0 valid'.

My question is this:

How do I return the whole class name of the partially selected class WITHOUT any extraneous classes?

By using the selector $('[class^="checkboxgroup"]') I need the whole part of that selector 'checkboxgroup0' and no other classes that may be assigned to it.

user_519413 · Answer

This issue you've encountered is one of the reasons why using incremental id/class attributes are not good practice.

To work around this issue with your JS you can instead use the same class on every checkbox. You can then group them by a data attribute instead. Using this method means that the number of classes on an element or their position within the class attribute string does not matter.

Try this example:

$('.checkboxgroup').click(function() {
  let $this = $(this);
  let $group = $(`.checkboxgroup[data-group="${$this.data('group')}"]`);
  $group.not(this).prop('checked', false);
});



  
    
    David Smith
  
  
    
    graham Foots
  
  
    
    Tom Silly

However, it's worth noting that what you're attempting to do can be far better achieved using HTML alone. Simply use a radio input and give them all the same name attribute, then you get the behaviour you're trying to create for free:


  
    
    David Smith
  
  
    
    graham Foots
  
  
    
    Tom Silly

Javascript / Jquery extract whole CLASS descriptor from a partial selection descriptor

1 Answers