Tuesday, August 13, 2019

How to get multiple checkboxes with value of drop down in php?

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 :


  • Before select the questions

  • After select the question show the multiple checkboxes

No comments:

Post a Comment

Popular Posts