JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="jquery/jquery.min.js"></script>
<script type="text/javascript">
<!--
function clearForms()
{
var i;
for (i = 0; (i < document.forms.length); i++) {
document.forms[i].reset();
}
}
//-->
</script>
<script type="text/javascript">
<!--
//initial checkCount of zero
var checkCount=0
//maximum number of allowed checked boxes
var maxChecks=8
function setChecks(obj){
//increment/decrement checkCount
if(obj.checked){
checkCount=checkCount+1
}else{
checkCount=checkCount-1
}
//if they checked a 4th box, uncheck the box, then decrement checkcount and pop alert
if (checkCount>maxChecks){
obj.checked=false
checkCount=checkCount-1
alert('you may only choose up to '+maxChecks+' options')
}
}
//-->
</script>
<script type="text/javascript">
<!--
$(document).ready(function(){
var array = [];
$("input[type=button]").click(function(){
for (var i = 0; i < array.length; i++){
if (array[i] == $(this).attr('value')){
array.splice(i, 1);
}
}
alert(array.length);
});
$('input[name="checkbox"]').click(function(){
if ($(this).attr('checked')){
// Add the new element if checked:
array.push($(this).attr('value'));
}
else{
// Remove the element if unchecked:
for (var i = 0; i < array.length; i++){
if (array[i] == $(this).attr('value')){
array.splice(i, 1);
}
}
}
// Clear all labels:
$("label").each(function (i, elem){
$(elem).html("");
});
/*
// Check the array and update labels
for (var i = 0; i < array.length; i++){
$("#" + array[i]).html(i+1);
}
*/
/*
// Check the array and update labels.
...