By john_b on

I have a list of checkboxes where several checkboxes (in different sub-sections of the list) have identical label text.

When a user selects a checkbox, all other checkboxes with the same label should be automatically selected.

Example:
Hat colors:
Red*
Blue
Green*
Coat colors:
Pink
Green*
Shoe colors:
Red*
Green*

checking any one 'Green' should cause the other two items with label 'Green' to be automatically selected

According to this, http://stackoverflow.com/questions/10124829/select-checkbox-by-label-tex... I can find the checkbox whose label contains a given text using :contains

As it happens, this is a taxonomy vocab. in which every item which appears more than once has a asterisk at the end of its name, as the name appears in the label text.

I am asking for help on how to read the label text from each manually checked item into a variable, then use that variable to cause all that other items of that page with the same label text to be automatically selected; and to do so without creating a loop.

⋅ Categories: Drupal 7.x

Comments

kunalkursija’s picture

kunalkursija commented

Hey John,

Below is the sample working example of same.

This might not be the exact thing you require, but this will surely help you.

HTML

<div class="checkboxes">
  <ul>
    <li>
    <input type="checkbox" name="red"/>
        <label>red</label>
    </li>
    <li>
      <input type="checkbox" name="black"/>
      <label>black</label>
    </li>
    <li>
      <input type="checkbox" name="red"/>  
      <label>red</label>
    </li>
    <li>
      <input type="checkbox" name="black"/>
      <label>black</label>
    </li>      
  </ul>  
</div>

jQuery

$(".checkboxes li input").click(function(){
var x = $(this).attr("name");
$(".checkboxes").find("input[name="+x+"]").attr('checked',"checked");
});
john_b’s picture

john_b commented

Many thanks for that. I will go and try it very soon.

Digit Professionals specialising in Drupal, WordPress & CiviCRM support for publishers in non-profit and related sectors

john_b’s picture

john_b commented

Thanks for getting me started. This is what I got working.

--EDIT--

Simplified version, for getting and checking checkboxes where two have the same label text.

Problem is I have not worked out how to untick the boxes on second click using this method.


$(".term-reference-tree li ul li input").not(':checked').change(function(){  
  var x = $(this).next().text();
    $(":contains("+x+")").prev("input").attr('checked', true); 
});

Digit Professionals specialising in Drupal, WordPress & CiviCRM support for publishers in non-profit and related sectors

kunalkursija’s picture

kunalkursija commented

Glad to help you :)