JSFiddle - React, Tailwind, and code Playground

by shivaay123

HTML

<html>
<body>

<h2>Create a checkbox and get its value</h2>
<h4> Select the subject, you are interested in</h4>
<tr>
<td> Science: <input type="checkbox" id="s1" class="ss" value="Science"> </td>
<td> Math: <input type="checkbox" id="s2" class="ss" value="Math"> </td> 
</tr> <tr>
<td> Social: <input type="checkbox" id="s3" class="ss" value="Social"> </td>
<td> Optional: <input type="checkbox" id="s4" class="ss" value="Optional"> </td>
</tr> 
<td> Computer: <input type="checkbox" id="s5" class="ss" value="Computer"> </td>
<td> Health: <input type="checkbox" id="s6" class="ss" value="Health"> </td>
<button onclick="checkAll()">Check all</button> <br><br>
<button onclick="getCheckboxValue()">Submit</button> <br>
<h4 id="result"></h4>  

<script>
function checkAll() {
        var inputs = document.querySelectorAll('.ss'); 
        for (var k = 0; k < inputs.length; k++) { 
            inputs[k].checked = true; 
        } 
}
function getCheckboxValue() {

  var sub1 = document.getElementById("s1");
  var sub2 = document.getElementById("s2");
  var sub3 = document.getElementById("s3");
  var sub4 = document.getElementById("s4");
  var sub5 = document.getElementById("s5");
  var sub6 = document.getElementById("s6");
   
  var result=" "; 
  if (sub1.checked == true){
    var ss1 = document.getElementById("s1").value;
    result = ss1 + ","; 
  } 
  else if (sub2.checked == true){
    var ss2 = document.getElementById("s2").value;
    result = result + ss2 + ","; 
  }
  else if (sub3.checked == true){
  
    var ss3 = document.getElementById("s3").value;
    result = result + ss3 + ","; 
  }
  else if (sub4.checked == true){
    var ss4 = document.getElementById("s4").value;
    result = result + ss4 + ","; 
  }
  else if (sub5.checked == true){
    var ss5 = document.getElementById("s5").value;
    result = result + ss5 + ","; 
  }
  else if (sub6.checked == true){
    var ss6 = document.getElementById("s6").value;
    result = result + ss6; 
  } else {
  return...