Home Tutorial Javascript JavaScript Checkbox In DropDown box

 
 

JavaScript Checkbox In DropDown box
Posted on: August 12, 2010 at 12:00 AM
In this section, you will learn how to display the checkboxes inside the dropdown box.

JavaScript Checkbox In DropDown box

In this section, you will learn how to display the checkboxes inside the dropdown box. Now to implement this, we have used a div tag inside which we have created checkboxes. And if you want to get the selected values, select the checkbox (or checkboxes) and click the button. An alert box will display the selected values.

Here is the code:

<script>
function
selectCheckBox()
{
var
total=""
for(var i=0; i < document.form.nums.length; i++){
if(document.form.nums[i].checked)
total +=document.form.nums[i].value + "\n"
}
if(total=="")
alert("select checkboxes")
else
alert("Selected Values are : \n"+total);
}
</script>
<
form name="form">
<
div
style="overflow: auto; width: 100px; height: 75px; border: 1px solid #336699; padding-left: 5px">
<
input type="checkbox" name="nums" value="1"> 1<br>
<
input type="checkbox" name="nums" value="2"> 2<br>
<
input type="checkbox" name="nums" value="3"> 3<br>
<
input type="checkbox" name="nums" value="4"> 4<br>
<
input type="checkbox" name="nums" value="5"> 5<br>
<
input type="checkbox" name="nums" value="6"> 6<br>
</
div>
<
input type="button" name="goto" onClick="selectCheckBox()"value="Check">
<
form>

Output:

After selecting the checkboxes, if you click the button, an alert message will get displayed:

Related Tags for JavaScript Checkbox In DropDown box:


Ask Questions?

If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.

Ask your questions, our development team will try to give answers to your questions.