I have a php form which you can select multiple checkboxes with values from drop down list.
Please see below steps to select the multiple checkboxes as per drop down selection.
Step 1: create a drop down list using HTML form.
<form name="ques" action="" method="post">
<div class="title">
Multiple Checkboxes
</div>
<div class="multi">
<select id="security_ques" name="security_ques" onchange="check_question();">
<option value="" selected>Select question</option>
<option value="1">Physical</option>
<option value="2">Chemistry</option>
<option value="3">Biology</option>
</select>
</div>
<div id="physical" class="check">
<div><input type="checkbox" name="ques" value="Question1">Question1</div>
<div><input type="checkbox" name="ques" value="Question2">Question2</div>
<div><input type="checkbox" name="ques" value="Question3">Question3</div>
</div>
<div id="chemistry" class="check">
<div><input type="checkbox" name="ques" value="Question1">Question4</div>
<div><input type="checkbox" name="ques" value="Question1">Question5</div>
<div><input type="checkbox" name="ques" value="Question1">Question6</div>
</div>
<div id="biology" class="check">
<div><input type="checkbox" name="ques" value="Question1">Question7</div>
<div><input type="checkbox" name="ques" value="Question1">Question8</div>
<div><input type="checkbox" name="ques" value="Question1">Question9</div>
</div>
</form>
Step 2: CSS code
<style>
.title {
color: blue;
font-size: 24px;
margin: 10px;
}
.multi {
margin: 10px;
}
.check {
margin: 10px;
display:none;
}
</style>
Step 3: Add Javascript code
<script type="text/javascript">
function check_question() {
if(document.getElementById('security_ques').value == "1") {
document.getElementById('physical').style.display = 'block';
document.getElementById('chemistry').style.display = 'none';
document.getElementById('biology').style.display = 'none';
} else if(document.getElementById('security_ques').value == "2") {
document.getElementById('physical').style.display = 'none';
document.getElementById('chemistry').style.display = 'block';
document.getElementById('biology').style.display = 'none';
} else if(document.getElementById('security_ques').value == "3") {
document.getElementById('physical').style.display = 'none';
document.getElementById('chemistry').style.display = 'none';
document.getElementById('biology').style.display = 'block';
}
}
</script>
Output :
Please see below steps to select the multiple checkboxes as per drop down selection.
Step 1: create a drop down list using HTML form.
<form name="ques" action="" method="post">
<div class="title">
Multiple Checkboxes
</div>
<div class="multi">
<select id="security_ques" name="security_ques" onchange="check_question();">
<option value="" selected>Select question</option>
<option value="1">Physical</option>
<option value="2">Chemistry</option>
<option value="3">Biology</option>
</select>
</div>
<div id="physical" class="check">
<div><input type="checkbox" name="ques" value="Question1">Question1</div>
<div><input type="checkbox" name="ques" value="Question2">Question2</div>
<div><input type="checkbox" name="ques" value="Question3">Question3</div>
</div>
<div id="chemistry" class="check">
<div><input type="checkbox" name="ques" value="Question1">Question4</div>
<div><input type="checkbox" name="ques" value="Question1">Question5</div>
<div><input type="checkbox" name="ques" value="Question1">Question6</div>
</div>
<div id="biology" class="check">
<div><input type="checkbox" name="ques" value="Question1">Question7</div>
<div><input type="checkbox" name="ques" value="Question1">Question8</div>
<div><input type="checkbox" name="ques" value="Question1">Question9</div>
</div>
</form>
Step 2: CSS code
<style>
.title {
color: blue;
font-size: 24px;
margin: 10px;
}
.multi {
margin: 10px;
}
.check {
margin: 10px;
display:none;
}
</style>
Step 3: Add Javascript code
<script type="text/javascript">
function check_question() {
if(document.getElementById('security_ques').value == "1") {
document.getElementById('physical').style.display = 'block';
document.getElementById('chemistry').style.display = 'none';
document.getElementById('biology').style.display = 'none';
} else if(document.getElementById('security_ques').value == "2") {
document.getElementById('physical').style.display = 'none';
document.getElementById('chemistry').style.display = 'block';
document.getElementById('biology').style.display = 'none';
} else if(document.getElementById('security_ques').value == "3") {
document.getElementById('physical').style.display = 'none';
document.getElementById('chemistry').style.display = 'none';
document.getElementById('biology').style.display = 'block';
}
}
</script>
Output :
- Before select the questions
- After select the question show the multiple checkboxes


No comments:
Post a Comment