JSFiddle - React, Tailwind, and code Playground

by Patrick Robles

HTML

<input type="checkbox" id="selAll"/>
<strong>Check All</strong>
<br/>
<input type="checkbox" name="dataArr[]" data-name="Kimi R Santos" values="200301"/>
Kimi R Santos
<br/>
<input type="checkbox" name="dataArr[]" data-name="Gonzalo G Ordonez" values="200501"/>
Gonzalo G Ordonez
<br/>
<input type="checkbox" name="dataArr[]" data-name="Ruth Paula Mendiola Tandoc" values="201012"/>
Ruth Paula Mendiola Tandoc
<br/>
<input type="checkbox" name="dataArr[]" data-name="Cherry Mae Banag Nonesa" values="201021"/>
Cherry Mae Banag Nonesa
<br/>
<input type="checkbox" name="dataArr[]" data-name="Christian Rovie Cabang Fadrigo" values="201022"/>
Christian Rovie Cabang Fadrigo
<br/>
<input type="checkbox" name="dataArr[]" data-name="Madeline P Pedrosa" values="201023"/>
Madeline P Pedrosa
<br/>

<div id="toggle"></div>

JavaScript

$('#selAll').change(function(){ 
		  checkboxes = document.getElementsByName('dataArr[]');
		  var txt = "";
		  for(var i=0, n=checkboxes.length;i<n;i++) {
			checkboxes[i].checked = this.checked;
			
			if(checkboxes[i].checked){
				txt += $(checkboxes[i]).data('name') + "<br>";
			}
		  }
		  
			$('#toggle').html(txt);
		});
		
		$('input[name="dataArr[]"]').change(function(){ 
			checkboxes = document.getElementsByName('dataArr[]');
			var txt ="";
			for(var i=0, n=checkboxes.length;i<n;i++) {
				
				if(checkboxes[i].checked){
							
					txt += $(checkboxes[i]).data('name') + "<br>";
				}
			}
			$('#toggle').html(txt);
		});