Share on Google+Share on Google+

JavaScript Checkbox In DropDown box

Advertisement
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:

Advertisements

Posted on: August 12, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.