Develop Reference

Showing a Result Table based on an array of Radio Buttons selected

I am new to coding. I'm trying to build an online form where there are a few questions that user will need to answer and questions are done in radio button options. Based on the array of radio buttons selected, I will then need to show the results on the same page. I'm thinking of using if..else statement but it doesn't seem to be working.
Here is my code:
<script>
function ShowHideDiv() {
if (document.getElementById("chkCitizen").checked ? && document.getElementById("chkMale").checked ?
&& document.getElementById("chkSingle").checked ? && document.getElementById("chkEmployed").checked ?
&& document.getElementById("chkNo").checked ? )
{
btn1.style.visibility = "visible";
var dvtext = document.getElementById("dvtext");
dvtext.style.display = "block" : "none";
}
else if (document.getElementById("chkCitizen") && document.getElementById("chkFemale")
&& document.getElementById("chkSingle") && document.getElementById("chkEmployed")
&& document.getElementById("chkNo")
{
btn1.style.visibility = "visible";
var dvtext = document.getElementById("dvtext");
dvtext.style.display = "block" : "none";
}
}
function resetFunction(){
document.getElementById("reliefChecker").reset();
}
</script>
Here's the full code with html and css:
<script>
function ShowHideDiv() {
if (document.getElementById("chkCitizen").checked && document.getElementById("chkMale").checked
&& document.getElementById("chkSingle").checked && document.getElementById("chkEmployed").checked
&& document.getElementById("chkNo").checked)
{
btn1.style.visibility = "visible";
var btn1 = document.getElementById("btn1");
var dvtext = document.getElementById("dvtext");
dvtext.style.display = "block" : "none";
}
else if (document.getElementById("chkCitizen").checked && document.getElementById("chkFemale").checked
&& document.getElementById("chkSingle").checked && document.getElementById("chkEmployed").checked
&& document.getElementById("chkNo").checked)
{
btn1.style.visibility = "visible";
var btn1 = document.getElementById("btn1");
var dvtext = document.getElementById("dvtext");
dvtext.style.display = "block" : "none";
}
else if (document.getElementById("chkPR").checked && document.getElementById("chkMale").checked
&& document.getElementById("chkSingle").checked && document.getElementById("chkEmployed").checked
&& document.getElementById("chkNo").checked)
{
btn1.style.visibility = "visible";
var btn1 = document.getElementById("btn1");
var dvtext = document.getElementById("dvtext");
dvtext.style.display = "block" : "none";
}
else if (document.getElementById("chkPR").checked && document.getElementById("chkFemale").checked
&& document.getElementById("chkSingle").checked && document.getElementById("chkEmployed").checked
&& document.getElementById("chkNo").checked)
{
btn1.style.visibility = "visible";
var btn1 = document.getElementById("btn1");
var dvtext = document.getElementById("dvtext");
dvtext.style.display = "block" : "none";
}
else if (document.getElementById("chkForeigner").checked && document.getElementById("chkMale").checked
&& document.getElementById("chkSingle").checked && document.getElementById("chkEmployed").checked
&& document.getElementById("chkNo").checked)
{
btn1.style.visibility = "visible";
var btn1 = document.getElementById("btn1");
var dvtext = document.getElementById("dvtext");
dvtext.style.display = "block" : "none";
}
else (document.getElementById("chkForeigner").checked && document.getElementById("chkFemale").checked
&& document.getElementById("chkSingle").checked && document.getElementById("chkEmployed").checked
&& document.getElementById("chkNo").checked)
{
btn1.style.visibility = "visible";
var btn1 = document.getElementById("btn1");
var dvtext = document.getElementById("dvtext");
dvtext.style.display = "block" : "none";
}
}
function resetFunction(){
document.getElementById("reliefChecker").reset();
}
</script>
.button {
background-color: #F7922C;
border-radius: 12px;
border: 2px solid white;
color: white;
padding: 10px 40px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: none;
cursor: pointer;
visibility: block;
}
.buttonReset {
background-color: #FFFFFF;
border-radius: 12px;
border: 2px solid #005AAD;
color: black;
padding: 10px 40px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: none;
cursor: pointer;
visibility: hidden;
}
.center {
text-align:center;
}
<h1><p style="font-family:Arial">Checker</p></h1>
<form id="reliefChecker">
<fieldset id="reliefChecker"; style="padding:10px;border:0px solid #FFFFFF;">
<!-- Second Question -->
<p style="font-family:Arial; font-size:25px;font-weight:bold">
Gender <span style="color:red">*</span></p>
<label for="chkMale" style="font-family:Arial; font-size:20px;">
<input type="radio" id="chkMale" name="gender" value="male" onclick="ShowHideDiv()">
Male</label>
<br>
<label for="chkFemale" style="font-family:Arial; font-size:20px;">
<input type="radio" id="chkFemale" name="gender" value="female" onclick="ShowHideDiv()">
Female</label>
<!-- Third Question -->
<p style="font-family:Arial; font-size:25px;font-weight:bold">
Marital Status <span style="color:red">*</span></p>
<label for="chkMarried" style="font-family:Arial; font-size:20px;">
<input type="radio" id="chkMarried" name="maritalStatus" value="married" onclick="ShowHideDiv()">
Married</label>
<br>
<label for="chkSingle" style="font-family:Arial; font-size:20px;">
<input type="radio" id="chkSingle" name="maritalStatus" value="single" onclick="ShowHideDiv()">
Single</label>
<br>
<label for="chkDivorced" style="font-family:Arial; font-size:20px;">
<input type="radio" id="chkDivorced" name="maritalStatus" value="divorce" onclick="ShowHideDiv()">
Divorced</label>
<!-- Fourth Question -->
<p style="font-family:Arial; font-size:25px;font-weight:bold">
Employment Status <span style="color:red">*</span></p>
<label for="chkEmployed" style="font-family:Arial; font-size:20px;">
<input type="radio" id="chkEmployed" name="EmploymentStatus" value="employed" onclick="ShowHideDiv()">
Employee / Self-Employed (Including Part-Timers)</label>
<br>
<label for="chkUnemployed" style="font-family:Arial; font-size:20px;">
<input type="radio" id="chkUnemployed" name="EmploymentStatus" value="unemployed" onclick="ShowHideDiv()">
Unemployed</label>
<!-- Fifth Question -->
<p style="font-family:Arial; font-size:25px;font-weight:bold">
Do you have any children? <span style="color:red">*</span></p>
<label for="chkYes" style="font-family:Arial; font-size:20px;">
<input type="radio" id="chkYes" name="Children" value="yes">
Yes</label>
<br>
<label for="chkNo" style="font-family:Arial; font-size:20px;">
<input type="radio" id="chkNo" name="Children" value="no" onclick="ShowHideDiv()">
No</label>
<br><br>
<div class="center">
<input type="button" id="btn1" class="button center" value="Check Now" onclick="ShowHideDiv()">
</div>
<div id="dvtext" style="padding:20px;border:1px solid lightgray; border-radius:15px; margin:15px; background-color:#FFFAC7; font-size:22px; font-family:Arial;display:none">
<span style="font-size:24px"><b><u>Results</u></b></span>
<br><br>
Show some results here!
<div class="center">
<input type="button" id="btnreset1" class="buttonReset center" value="Reset" onclick="ShowHideDiv(); resetFunction()">
</div>
</fieldset>
</form>
</body>
</html>

You can try this one (as I understood, it works fine (if you have more questions, it can be done with loops) ).
HTML code is:
<div class="questions">
<div class="question"> Question 1
<label>
<input class="answer" type="radio" name="q1" value="one">One
</label>
<label>
<input class="answer" type="radio" name="q1" value="two">Two
</label>
<label>
<input class="answer" type="radio" name="q1" value="three">Three
</label>
<label>
<input class="answer" type="radio" name="q1" value="four">Four
</label>
</div>
<br>
<div class="question"> Question 2
<label>
<input class="answer" type="radio" name="q2" value="one">One
</label>
<label>
<input class="answer" type="radio" name="q2" value="two">Two
</label>
<label>
<input class="answer" type="radio" name="q2" value="three">Three
</label>
<label>
<input class="answer" type="radio" name="q2" value="four">Four
</label>
</div>
</div>
<br>
<button id="submit">Submit</button>
CSS code is:
.question {
display: flex;
flex-direction: column;
}
JS code is:
var submit = document.getElementById('submit');
submit.addEventListener('click', function() {
var answers = document.getElementsByClassName('answer');
var result = "";
for(var i=0; i<answers.length; i++) {
if (answers[i].checked) {
result += answers[i].value + "\n";
}
}
alert(result);
});

HTML
<div class="questions">
<div class="question"> Question 1
<label>
<input class="answer" type="radio" name="q1" value="one">One
</label>
<label>
<input class="answer" type="radio" name="q1" value="two">Two
</label>
<label>
<input class="answer" type="radio" name="q1" value="three">Three
</label>
<label>
<input class="answer" type="radio" name="q1" value="four">Four
</label>
</div>
<br>
<div class="question"> Question 2
<label>
<input class="answer" type="radio" name="q2" value="one">One
</label>
<label>
<input class="answer" type="radio" name="q2" value="two">Two
</label>
<label>
<input class="answer" type="radio" name="q2" value="three">Three
</label>
<label>
<input class="answer" type="radio" name="q2" value="four">Four
</label>
</div>
<br>
<button id="submit">Submit</button>
</div>
CSS
.question {
display: flex;
flex-direction: column;
}
JS
var submit = document.getElementById('submit');
var result = document.getElementById('result');
var resultText = document.getElementById('result-text');
var questions = document.getElementsByClassName('questions')[0];
submit.addEventListener('click', function() {
var answers = document.getElementsByClassName('answer');
var r = "";
for(var i=0; i<answers.length; i++) {
if (answers[i].checked) {
r += answers[i].value + "\n";
}
}
questions.style.display = 'none';
result.style.height = '300px';
resultText.innerHTML = r;
});

Why my functionality doesn't work after conditionally innerHTML?

I have a few checkboxes which represent subjects. And I have two custom(radio) select. I want to change innerHTML of my first select due to checkbox:checked length. If selected chekboxes length less than 3 I want to render different select options else another select options. When page load it works fine but after recheck my checkboxes I can not select any option from my first chekbox. Can someone please look at and help me
codepen link is also here
function subjectChange (){
var subjectName = document.getElementsByName('subject-name');
var questionSel = document.getElementsByClassName('options-container')[0];
var checkBoxlength = 0;
for(var i = 0; i < subjectName.length; i++) {
if(subjectName[i].checked){
checkBoxlength++
}
}
if(checkBoxlength <= 3) {
questionSel.innerHTML = `
<label class="option">
<input type="radio" class="radio first" value="5" name="question" checked>
<span>5</span>
</label>
<label class="option">
<input type="radio" class="radio first" value="10" name="question" checked>
<span>10</span>
</label>
`;
} else if(checkBoxlength >= 4) {
questionSel.innerHTML = `
<label class="option">
<input type="radio" class="radio first" value="5" name="question" checked>
<span>5</span>
</label>
<label class="option">
<input type="radio" class="radio first" value="10" name="question" checked>
<span>10</span>
</label>
<label class="option">
<input type="radio" class="radio first" value="15" name="question" checked>
<span>15</span>
</label>
`;
}
}
const selectBox = document.querySelectorAll('.select-box')
for(var i = 0; i < selectBox.length; i++) {
const selected = selectBox[i].querySelector('.selected');
const optionsContainer = selectBox[i].querySelector('.options-container');
const optionList = selectBox[i].querySelectorAll('.option');
selected.addEventListener('click', function(){
optionsContainer.classList.toggle("active");
})
optionList.forEach( o => {
var optionListItem= o.querySelectorAll('input[type="radio"]:checked + span');
optionListItem.forEach(e => selected.innerHTML = e.innerHTML)
o.addEventListener('click', function(){
var optionListItem= o.querySelectorAll('input[type="radio"]:checked + span');
optionListItem.forEach(e => selected.innerHTML = e.innerHTML)
optionsContainer.classList.remove('active')
var firstOptionList = document.querySelector('input[type="radio"]:checked');
var secondOptionList = document.querySelectorAll('.radio.second');
secondOptionList.forEach(e => {
e.removeAttribute('checked')
if(e.value == (firstOptionList.value * 2)){
//e.checked = true;
e.setAttribute('checked','');
var optionListItem2= document.querySelectorAll('input[type="radio"]:checked + span');
const selectedTwo = document.getElementsByClassName('selected');
optionListItem2.forEach(e => selectedTwo[1].innerHTML = e.innerHTML);
console.log(e)
}
})
})
})
}
.select-box {
display: flex;
flex-direction: column;
width: 400px;
}
.select-box .options-container {
background: cornflowerblue;
color: white;
max-height: 0;
width: 100%;
opacity: 0;
transition: all .3s;
border-radius: 8px;
overflow: hidden;
order: 1;
}
.selected {
background: cornflowerblue;
color: white;
border-radius: 8px;
margin-bottom: 8px;
position: relative;
order: 0;
}
.selected::after {
content: '';
background: url('./arrow-down.svg');
background-size: contain;
background-repeat: no-repeat;
position: absolute;
height: 100%;
width: 18px;
right: 10px;
top: 40%;
transform: all .3s;
}
.select-box .option {
display: flex;
}
.select-box .option,
.selected {
padding: 12px 24px;
cursor: pointer;
}
.select-box span {
cursor: pointer;
}
.select-box .option:hover {
background: crimson;
}
.select-box .option .radio {
display: none;
}
.select-box .options-container.active {
max-height: 200px;
opacity: 1;
overflow-y: scroll;
}
.select-box .options-container.active + .selected::after {
transform: rotateX(-180deg);
top: -40%;
}
.select-box .options-container::-webkit-scrollbar {
width: 8px;
background: green;
border-radius: 0 8px 8px 0;
}
.select-box .options-container::-webkit-scrollbar-thumb {
background: red;
border-radius: 0 8px 8px 0;
}
<div class="subject-container">
<div>
<input name="subject-name" onchange="subjectChange()" type="checkbox" id="checkbox1" checked />
<label for="checkbox1">USA</label>
</div>
<div>
<input name="subject-name" onchange="subjectChange()" type="checkbox" id="checkbox2" checked />
<label for="checkbox2">Canada</label>
</div>
<div>
<input name="subject-name" onchange="subjectChange()" type="checkbox" id="checkbox3" checked />
<label for="checkbox3">Germany</label>
</div>
<div>
<input name="subject-name" onchange="subjectChange()" type="checkbox" id="checkbox4" checked />
<label for="checkbox4">France </label>
</div>
<div>
<input name="subject-name" onchange="subjectChange()" type="checkbox" id="checkbox5" checked />
<label for="checkbox5">Italy</label>
</div>
<div>
<input name="subject-name" onchange="subjectChange()" type="checkbox" id="checkbox6" checked />
<label for="checkbox6">China</label>
</div>
<div>
<input name="subject-name" onchange="subjectChange()" type="checkbox" id="checkbox7" checked />
<label for="checkbox7">Japan</label>
</div>
<div>
<input name="subject-name" onchange="subjectChange()" type="checkbox" id="checkbox8" checked />
<label for="checkbox8">India</label>
</div>
</div>
<form action="">
<div class="select-box">
<div class="options-container">
<label class="option">
<input type="radio" class="radio first" value="5" name="question">
<span>5</span>
</label>
<label class="option">
<input type="radio" class="radio first" value="10" name="question">
<span>10</span>
</label>
<label class="option">
<input type="radio" class="radio first" value="15" name="question" >
<span>15</span>
</label>
<label class="option">
<input type="radio" class="radio first" value="20" name="question">
<span>20</span>
</label>
</div>
<div class="selected">Number of question</div>
</div>
<div class="select-box">
<div id="second-list" class="options-container">
<label class="option">
<input type="radio" class="radio second" value="10" name="minutes">
<span>10 minutes</span>
</label>
<label class="option">
<input type="radio" class="radio second" value="20" name="minutes" >
<span>20 minutes</span>
</label>
<label class="option">
<input type="radio" class="radio second" value="30" name="minutes">
<span>30 minutes</span>
</label>
<label class="option">
<input type="radio" class="radio second" value="40" name="minutes">
<span>40 minutes</span>
</label>
</div>
<div id="selected" class="selected">Select Exam Minute</div>
</div>
<button type="submit">Submit</button>
</form>
?

In your javascript you have added eventListeners to all the select options when your page is loaded at first. But when you call the 'subjectChange' function, the innerHTMl is changed and new elements are added to your page but these new elements do not have eventListeners attached to them. You need to attach eventListeners to these elements as well. Like this :
function subjectChange (){
var subjectName = document.getElementsByName('subject-name');
var questionSel = document.getElementsByClassName('options-container')[0];
var checkBoxlength = 0;
for(var i = 0; i < subjectName.length; i++) {
if(subjectName[i].checked){
checkBoxlength++
}
}
if(checkBoxlength <= 3) {
questionSel.innerHTML = `
<label class="option">
<input type="radio" class="radio first" value="5" name="question" checked>
<span>5</span>
< /label>
<label class="option">
<input type="radio" class="radio first" value="10" name="question" checked>
<span>10</span>
</label>
`;
} else if(checkBoxlength >= 4) {
questionSel.innerHTML = `
<label class="option">
<input type="radio" class="radio first" value="5" name="question" checked>
<span>5</span>
</label>
<label class="option">
<input type="radio" class="radio first" value="10" name="question" checked>
<span>10</span>
</label>
<label class="option">
<input type="radio" class="radio first" value="15" name="question" checked>
<span>15</span>
</label>
`;
}
start(); //this will add eventListeners to all the elements again
}
function start(){
const selectBox = document.querySelectorAll('.select-box')
for(var i = 0; i < selectBox.length; i++) {
const selected = selectBox[i].querySelector('.selected');
const optionsContainer = selectBox[i].querySelector('.options-container');
const optionList = selectBox[i].querySelectorAll('.option');
selected.addEventListener('click', function(){
optionsContainer.classList.toggle("active");
})
optionList.forEach( o => {
var optionListItem= o.querySelectorAll('input[type="radio"]:checked + span');
optionListItem.forEach(e => selected.innerHTML = e.innerHTML)
o.addEventListener('click', function(){
var optionListItem= o.querySelectorAll('input[type="radio"]:checked + span');
optionListItem.forEach(e => selected.innerHTML = e.innerHTML)
optionsContainer.classList.remove('active')
var firstOptionList = document.querySelector('input[type="radio"]:checked');
var secondOptionList = document.querySelectorAll('.radio.second');
secondOptionList.forEach(e => {
e.removeAttribute('checked')
if(e.value == (firstOptionList.value * 2)){
//e.checked = true;
e.setAttribute('checked','');
var optionListItem2= document.querySelectorAll('input[type="radio"]:checked + span');
const selectedTwo = document.getElementsByClassName('selected');
optionListItem2.forEach(e => selectedTwo[1].innerHTML = e.innerHTML);
console.log(e)
}
})
})
})
}
}
start();

How to disable submit button before all quiz question checked?

<style>
.hide {
display:none;
}
.question {
padding: 25px;
}
input[type="radio"] {
margin-right: 10px;
}
.btton {
padding: 15px 25px;
}
</style>
<div class="questions" id="question-div">
<?php
$i=1;
echo '<div class="questions" id="question-div">
<form action="" method="POST" id="question-form">';
foreach($quiz as $r)
{
echo '<div id="div-'.$i.'" class="question'; if($i>1)echo ' hide';echo '">
<input type="hidden" class="classesID" data-id="'.$r->classesID.'" />
<input type="hidden" class="questionID" data-id="'.$r->videoquizID.'" />
<p>Question '.$i.' : <input type="hidden" name="question[]" value="'.$r->videoquizID.'" id="'.$r->videoquizID.'" />'.$r->question.'</p>
<label class="radio-inline" data-id="'.$i.'" >
<input type="radio" class="answer" name="a-'.$r->videoquizID.'" value="'.$r->option1.'">'.$r->option1.'
</label><br/>
<label class="radio-inline" data-id="'.$i.'" >
<input type="radio" class="answer" name="a-'.$r->videoquizID.'" value="'.$r->option2.'">'.$r->option2.'
</label><br/>
<label class="radio-inline" data-id="'.$i.'" >
<input type="radio" class="answer" name="a-'.$r->videoquizID.'" value="'.$r->option3.'">'.$r->option3.'
</label><br/>
<label class="radio-inline" data-id="'.$i.'" >
<input type="radio" class="answer" name="a-'.$r->videoquizID.'" value="'.$r->option4.'">'.$r->option4.'
</label><br/>
</div>';
$i++;
}
echo '<div class="btton">
Prev
Next
Submit
Skip Quiz
</div>
</form>
</div>';
?>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
var maxq = <?php echo count($quiz); ?>;
$('.radio-inline').click(function(e) {
var id = parseInt($(this).data('id'));
if(id==1) $('.buttons').addClass('hide');
if(id!=(maxq-1))
{
$('#next').removeClass('hide');
}
var next = (id+1);
var prev = (id-1);
$('#next').data('id',next);
$('#prev').data('id',prev);
});
$('#next').click(function(e) {
var id = $(this).data('id');
$('.buttons').addClass('hide');
if(id==(maxq-1))
{
$('#submit,#prev').removeClass('hide');
}
else {$('.buttons').addClass('hide');$('#prev').removeClass('hide');}
$('.question').addClass('hide');
$('#div-'+id).removeClass('hide');
var next = id+1;
var prev = id-1;
$('#next').data('id',next);
$('#prev').data('id',prev);
});
$('#prev').click(function(e) {
var id = $(this).data('id');
$('#prev').removeClass('hide');
if(id==1)$('.buttons').addClass('hide');
$('.question').addClass('hide');
$('#div-'+id).removeClass('hide');
var next = id+1;
var prev = id-1;
$('#next').data('id',next);
$('#prev').data('id',prev);
});
</script>
In this question I have created simple quiz which is working fine but the problem is that submit button is enable if quiz option is select or not. I don't want to enable my submit button before all quiz option check. Once all question option check then submit button enable. So, How can I do this? Please help me.
Thank You

Apart the duplicated IDs I wuold suggest to use a change event handler on radio buttons and count if the number of checked radios is the same of all div with class question.
In order to toggle the disabled class you can use .toggleClass( className, state ) :
$('#question-form :radio').on('change', function (e) {
var rChecked = $('#question-form div.question :radio:checked').length;
var divrChecked = $('#question-form div.question').length;
$('#submit').toggleClass('disabled', rChecked != divrChecked);
})
.hide {
display: none;
}
.question {
padding: 25px;
}
input[type="radio"] {
margin-right: 10px;
}
.btton {
padding: 15px 25px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="questions" id="question-div1">
<div class="questions" id="question-div2">
<form action="" method="POST" id="question-form">
<div id="div-1'" class="question">
<input type="hidden" class="classesID" data-id="classesID1"/>
<input type="hidden" class="questionID" data-id="videoquizID1"/>
<p>Question 1 : <input type="hidden" name="question[]" value="'videoquizID1" id="videoquizID1"/>question1
</p>
<label class="radio-inline" data-id="1">
<input type="radio" class="answer" name="a-videoquizID1" value="option1">option1
</label><br/>
<label class="radio-inline" data-id="1">
<input type="radio" class="answer" name="a-videoquizID1" value="option2">option2
</label><br/>
<label class="radio-inline" data-id="1">
<input type="radio" class="answer" name="a-videoquizID1" value="option3">option3
</label><br/>
<label class="radio-inline" data-id="1">
<input type="radio" class="answer" name="a-videoquizID1" value="option4">option4
</label><br/>
</div>
<div id="div-2'" class="question">
<input type="hidden" class="classesID" data-id="classesID2"/>
<input type="hidden" class="questionID" data-id="videoquizID2"/>
<p>Question 2 : <input type="hidden" name="question[]" value="'videoquizID2" id="videoquizID2"/>question1
</p>
<label class="radio-inline" data-id="2">
<input type="radio" class="answer" name="a-videoquizID2" value="option1">option1
</label><br/>
<label class="radio-inline" data-id="2">
<input type="radio" class="answer" name="a-videoquizID2" value="option2">option2
</label><br/>
<label class="radio-inline" data-id="2">
<input type="radio" class="answer" name="a-videoquizID2" value="option3">option3
</label><br/>
<label class="radio-inline" data-id="2">
<input type="radio" class="answer" name="a-videoquizID2" value="option4">option4
</label><br/>
</div>
<div class="btton">
Prev
Next
Submit
Skip Quiz
</div>
</form>
</div>
</div>

Highlighting with several colors on the table

I've asked for help about this work before, but I realized that I made a mistake. So here I have a working code to switch highlighting colors for the value selected on the table. I can change the color of highlighting with this code, but I can't highlight different values with different colors at the same time. here is a fiddle example: https://jsfiddle.net/vvhbvdyj/ and jquery code is below. I'd be glad if someone can help me with this. thanks.
// JavaScript Document
$(document).ready(function() {
$('.selector').each(function() {
$(this).on('click', check);
});
$('.all').each(function() {
$(this).on('click', all);
});
function all(event) {
if ($(this).is(':checked')) {
$("input:checkbox:not(:checked)", $(this).parents('form')).not(this).prop("checked", "checked");
} else {
$("input:checkbox(:checked)", $(this).parents('form')).not(this).prop("checked", "");
}
//$('.selector').prop("checked", this.name === "SelectAll");
check(event);
}
function check(event) {
var checked = $(".selector:checked").map(function() {
return this.name
}).get()
$('td').css('background', '#fff').filter(function() {
return $.inArray($(this).text(), checked) >= 0
}).css('background', $('#nextColor').val())
if ($(this).is(".selector"))
$('.all').not(this).prop("checked", false)
}
$("#Hidden").on("click", function() {
$(".selector").toggle();
});
});

If I get you right, you want to highlight the selected values with the current color and not change the color of the previously selected values.
In this case you should pass the current color to che check function each time you click the checkbox. With a few modifications your code would look like this:
$(document).ready(function() {
$('.selector').each(function() {
$(this).on('click', function(e) {
check($(this).prop("checked") ? $("#nextColor").val() : '#fff', $(this).attr("name"));
});
});
$('.all').each(function() {
$(this).on('click', all);
});
function all(event) {
if ($(this).is(':checked')) {
let checked = $("input:checkbox:not(:checked)", $(this).parents('form')).not(this);
checked.prop("checked", true);
check($("#nextColor").val(), ...checked.map((i, e) => e.name).get());
} else {
let checked = $("input:checkbox(:checked)", $(this).parents('form')).not(this);
checked.prop("checked", false);
check('#fff', ...checked.map((i, e) => e.name).get());
}
}
function check(color, ...elements) {
$('td').each((i, td) => {
if (elements.includes($(td).text())) $(td).css('background', color);
});
}
});
#charset "utf-8";
/* CSS Document */
*
{
margin: 3;
padding: 3;
}
html, body, .Container
{
height: 98%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.Header
{
margin-bottom: 10px;
background-color: #fff;
}
.Content
{
position: relative;
z-index: 1;
}
.Content:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 500px;
height: 100%;
}
.Wrapper > div
{
height: 100%;
}
.LeftContent
{
background-color: white;
overflow: auto;
width: 600px;
}
.mainContent
{
background-color: white;
margin-left: 800px;
}
.selector {
display: none;
}
tr.border_bottom td {
border-bottom:1pt solid black;
}
table.tableizer-table {
border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
border-collapse:collapse; /* Keeps the table lines like in excel */
table-layout:fixed; /* Fits the table in the screen */
}
.tableizer-table td {
padding: 6px;
margin: 6px;
border: 2px solid #ccc;
}
.tableizer-table th {
background-color: #FFFFFF;
color: #FFF;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3><input id="nextColor" type="color" value="#9ac99d"> Parameters:</h3>
<div>
<form id="form1" name="form1" method="post" action="">
<label>
<input type="checkbox" name="SelectAll" class="all" />All</label><label>
<input type="checkbox" name="5" class="selector" />5</label><label>
<input type="checkbox" name="7" class="selector" />7</label><label>
<input type="checkbox" name="9" class="selector" />9</label><label>
<input type="checkbox" name="10" class="selector" />10</label><label>
<input type="checkbox" name="19" class="selector" />19</label><label>
<input type="checkbox" name="23" class="selector" />23</label><label>
<input type="checkbox" name="35" class="selector" />35</label><label>
<input type="checkbox" name="37" class="selector" />37</label><label>
<input type="checkbox" name="40" class="selector" />40</label><label>
<input type="checkbox" name="43" class="selector" />43</label><label>
<input type="checkbox" name="44" class="selector" />44</label><label>
<input type="checkbox" name="46" class="selector" />46</label><label>
<input type="checkbox" name="51" class="selector" />51</label><label>
<input type="checkbox" name="52" class="selector" />52</label><label>
<input type="checkbox" name="54" class="selector" />54</label><label>
<input type="checkbox" name="55" class="selector" />55</label><label>
<input type="checkbox" name="60" class="selector" />60</label><label>
<input type="checkbox" name="61" class="selector" />61</label><label>
<input type="checkbox" name="62" class="selector" />62</label><label>
<input type="checkbox" name="70" class="selector" />70</label><label>
<input type="checkbox" name="74" class="selector" />74</label><label>
<input type="checkbox" name="75" class="selector" />75</label> </form>
<form id="form1" name="form1" method="post" action="">
<label>
<input type="checkbox" name="SelectAll" class="all" />All</label><label>
<input type="checkbox" name="5" class="selector" />5</label><label>
<input type="checkbox" name="8" class="selector" />8</label><label>
<input type="checkbox" name="10" class="selector" />10</label><label>
<input type="checkbox" name="15" class="selector" />15</label><label>
<input type="checkbox" name="16" class="selector" />16</label><label>
<input type="checkbox" name="18" class="selector" />18</label><label>
<input type="checkbox" name="21" class="selector" />21</label><label>
<input type="checkbox" name="26" class="selector" />26</label><label>
<input type="checkbox" name="28" class="selector" />28</label><label>
<input type="checkbox" name="30" class="selector" />30</label><label>
<input type="checkbox" name="33" class="selector" />33</label><label>
<input type="checkbox" name="39" class="selector" />39</label><label>
<input type="checkbox" name="46" class="selector" />46</label><label>
<input type="checkbox" name="49" class="selector" />49</label><label>
<input type="checkbox" name="50" class="selector" />50</label><label>
<input type="checkbox" name="51" class="selector" />51</label><label>
<input type="checkbox" name="52" class="selector" />52</label><label>
<input type="checkbox" name="53" class="selector" />53</label><label>
<input type="checkbox" name="54" class="selector" />54</label><label>
<input type="checkbox" name="62" class="selector" />62</label><label>
<input type="checkbox" name="64" class="selector" />64</label><label>
<input type="checkbox" name="74" class="selector" />74</label> </form>
</div>
<div>
<table class="tableizer-table">
<thead><tr class="tableizer-firstrow"><th>2</th><th>3</th><th>18</th><th>20</th><th>22</th><th>29</th><th>30</th><th>32</th><th>33</th><th>34</th><th>38</th><th>39</th><th>51</th><th>56</th><th>57</th><th>60</th><th>61</th><th>63</th><th>72</th><th>75</th><th>77</th><th>80</th></tr></thead><tbody>
<tr><td>2</td><td>3</td><td>6</td><td>9</td><td>12</td><td>14</td><td>15</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>26</td><td>28</td><td>30</td><td>42</td><td>48</td><td>55</td><td>61</td><td>75</td><td>77</td></tr>
</tbody></table>
</div>

How to disable all checkboxes on load, and enable them one by one as file is selected to upload?

just need to disable the checkboxes on page load and enable them as the user selects a file to upload. For example, image is selected by user to upload for desktop so the sizes for desktop get enabled. Probably with javascript.
<html>
<head>
<title>Wallpaper Uploading Script</title>
<style type="text/css">
.formatting{
font-family: Arial;
font-size: .8em;
}
label{
display: block;
float: left;
width: 150px;
padding: 0 0px;
margin: 0 0px 0;
text-align: right;
}
form input, form textarea{
margin: 2px 0 2px 2px;
}
.checkbox{
text-align: left;
display: block;
padding: 2px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body class="formatting">
<p>Select a file to Upload: </p>
<form action="../php/get_uploaded_wall.php" method="POST" enctype="multipart/form-data">
<fieldset>
<label for="wall_name">Wall Name:</label>
<input type="text" name="wall_name" size="50" /><br />
<label for="thumbnail_path">Thumbnail path:</label>
<input type="file" name="thumbnail_path" size="100" /><br />
<label for="desktop_path">Desktop path:</label>
<input id="desktop_path" type="file" name="desktop_path" size="100" /><br />
<label for="phone_path">Phone path:</label>
<input type="file" name="phone_path" size="100" /><br />
<label for="tablet_path">Tablet path:</label>
<input type="file" name="tablet_path" size="100" /><br />
<label for="desktop_dimension_id">Desktop dimensions:</label>
<label class="checkbox" id="desktop_checkbox">
<input type="checkbox" name="1366x768"> 1366x768<br />
<input type="checkbox" name="1280x800"> 1280x800<br />
<input type="checkbox" name="1920x1080"> 1920x1080<br />
<span></span>
</label>
<label for="phone_dimensions_id">Phone dimensions:</label>
<label class="checkbox" id="phone_checkbox">
<input type="checkbox" name="640x960"> 640x960<br />
<input type="checkbox" name="640x1136"> 640x1136<br />
<input type="checkbox" name="960x720"> 960x720<br />
</label>
<label for="tablet_dimensions_id" id="tablet_checkbox">Tablet dimensions:</label>
<label class="checkbox">
<input type="checkbox" name="1024x768"> 1024x768<br />
<input type="checkbox" name="2048x1536"> 2048x1536<br />
</label>
</fieldset>
<br />
<fieldset>
<input type="submit" value="Upload Wall" />
<input type="reset" value="Clear" />
</fieldset>
</form>
</body>
</html>

Here is my solution. You can view it here in Jfiddle.
The javascript I used relies on jQuery. You can see it below:
$(window).ready( function () {
$('.desktopCB').attr('disabled', '');
$('.phoneD').attr('disabled', '');
$('.tabletD').attr('disabled', '');
});
$('#desktop_path').on('change', function () {
$('.desktopCB').removeAttr('disabled');
});
$('input[name=phone_path]').on('change', function () {
$('.phoneD').removeAttr('disabled');
});
$('input[name=tablet_path]').on('change', function () {
$('.tabletD').removeAttr('disabled');
});