How to tickmark the option in the Select box

Posted on 2005-04-19
Last Modified: 2010-04-09
I have select box in my application, when I will select particular option I have to tickmark (checked) that selected option. After selectiong again same option has to remove the tick mark(unchecked) the particular option.

Can you please provide me the some solution how to proceed.
Question by:ramsharma23
    LVL 32

    Accepted Solution

    Standard <select> boxes doesn't support this. You have to create/find a custom selectbox(dhtml) in order to achieve this.

    The closes you can get(I think) with standard select boxes is to color the selected item:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
        <title>My test</title>    
        <style type="text/css">
        <script type="text/javascript">
        var activeIndex = false;
        function selectThis(selectObj,theIndex){
            activeIndex = theIndex;
    <select name="mySelect" onchange="selectThis(this,this.selectedIndex)">
    <option value="1">Option 1</option>
    <option value="1">Option 2</option>
    <option value="1">Option 3</option>
    <option value="1">Option 4</option>
    <option value="1">Option 5</option>
    <option value="1">Option 6</option>
    <option value="1">Option 7</option>
    <option value="1">Option 8</option>
    <option value="1">Option 9</option>
    LVL 33

    Expert Comment

    Or do you mean a checkbox, instead of a select?

    <input type="checkbox"> Some label here
    LVL 12

    Expert Comment

    Well, I didn't come up with much.  The only concievable way to include a checkbox with your list box is to have a table cell next to your list box and have an array of checkboxes, one for each option tag.  Set the value attribute of each of these checkboxes to correspond to the value of the option tag.  It might work but seems a bit sloppy.  Lots of processing.  It would be sweet if there were an HTML character code for a checkmark.  Why aren't there more of those damn things???  Anyway if you need clarification let me know.  I think you could kill the border of the checkbox with the style attribute.

    Good luck

    LVL 8

    Expert Comment

    Here a checkbox checker:

    function checkMark(theBox){
      var allOpt = theBox.form[];
      for(var i=0;i<allOpt.length;i++){
        allOpt[i].checked = false;
      theBox.checked = true;
    <input type=checkbox name="myOpt" value="A" onClick="checkMark(this)"> A<br>
    <input type=checkbox name="myOpt" value="B" onClick="checkMark(this)"> B<br>
    <input type=checkbox name="myOpt" value="C" onClick="checkMark(this)"> C<br>
    <input type=checkbox name="myOpt" value="D" onClick="checkMark(this)"> D<br>
    <input type=checkbox name="myOpt" value="E" onClick="checkMark(this)"> E<br>
    <input type=checkbox name="myOpt" value="F" onClick="checkMark(this)"> F<br>
    <input type=submit>


    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    Both Easy and Powerful How easy is PHP? (  Very easy.  It has been described as "a programming language even my grandmother can use." How powerful is PHP?  http://en.wikiped…
    Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
    In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
    In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…

    729 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now