JSFiddle - React, Tailwind, and code Playground

by bryandowning

HTML

<input type="checkbox" id="checkUsers" class="checkAll" data-target="input[type=checkbox][rel=users]">

<label for="checkUsers">Users:</label>

<input type="checkbox" rel="users">
<input type="checkbox" rel="users">
<input type="checkbox" rel="users">
<input type="checkbox" rel="users">
<input type="checkbox" rel="users">


<br><br>


<input type="checkbox" id="checkPlaces" class="checkAll" data-target="input[type=checkbox][rel=places]">

<label for="checkPlaces">Places:</label>

<input type="checkbox" rel="places">
<input type="checkbox" rel="places">
<input type="checkbox" rel="places">
<input type="checkbox" rel="places">
<input type="checkbox" rel="places">

JavaScript

(function( $ ){
    
  $.fn.check = function() {  
    
    // "this" is a jQuery object of the checkbox that was clicked.
    var target = this.data("target");
    $(target).attr("checked", this[0].checked);

    return this; //maintain chainability
      
  };
    
})( jQuery );



$(function(){
    
    $(".checkAll").click(function(){
        $(this).check();
    });


});