?
Solved

How to tickmark the option in the Select box

Posted on 2005-04-19
6
Medium Priority
?
162 Views
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.
0
Comment
Question by:ramsharma23
4 Comments
 
LVL 32

Accepted Solution

by:
Batalf earned 2000 total points
ID: 13818710
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" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
    <title>My test</title>    
    <style type="text/css">
    .normal{
    color:#000000;
    }
    .highlighted{
    color:#FFFFFF;
    background-color:#660000;
    }
    </style>
    <script type="text/javascript">
    var activeIndex = false;
    function selectThis(selectObj,theIndex){
        if(activeIndex){
            selectObj.options[activeIndex].className='normal';
        }
        activeIndex = theIndex;
        selectObj.options[theIndex].className='highlighted';
    }
   
    </script>
    </head>
<body>
<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>
</select>
</body>
</html>
0
 
LVL 33

Expert Comment

by:snoyes_jw
ID: 13819053
Or do you mean a checkbox, instead of a select?

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

Expert Comment

by:jessegivy
ID: 13820685
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

JI
0
 
LVL 8

Expert Comment

by:NETTY4
ID: 13951379
Here a checkbox checker:

<html>
<head>
<script>
function checkMark(theBox){
  var allOpt = theBox.form[theBox.name];
  for(var i=0;i<allOpt.length;i++){
    allOpt[i].checked = false;
  }
  theBox.checked = true;
}
</script>
</head>
<body>
<form>
<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>
</form>
</body>
</html>


0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

862 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