Solved

Tie css for click event to another input?

Posted on 2015-01-04
5
106 Views
Last Modified: 2015-01-07
Hi Experts,

I have HTML below.
<input type="radio" name="radio" /><a>Plan A</a>
<input type="radio" name="radio" /><a>Plan B</a>  

How to only use CSS when click on <a> of Plan A, then radio was selected

I am very appreciate for any help.
Thanks.
0
Comment
Question by:Dao Nguyen
  • 2
  • 2
5 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40530968
Javascript.

You write a javascript function that adds a class:

<script type="text/javascript">
    function changeMe()
    {
        document.getElementById("changer").className += " NewClass";
    }
</script>

Open in new window


And then call that class using the onclick event:

<input type="radio" name="radio" onclick="changeMe()" id="changer" /><a>Plan A</a>
<input type="radio" name="radio" /><a>Plan B</a>  

Open in new window


Note that you have to add the id parameter in order for this to work.
0
 
LVL 4

Expert Comment

by:Jim Riddles
ID: 40531659
Jason is correct in that you will need to use Javascript to accomplish this...CSS alone can not do what you want.  However, his example was incorrect, since the OP wanted the radio button to be selected if someone clicked the anchor element.

Here is the updated javascript code:

function activateRadioButton(opt) {
	var choice = "radio " + opt.id;
	document.getElementById(choice).checked = true;
}

Open in new window


Here is the updated HTML:

<input type="radio" name="radio" id="radio a" /><a id="a" onclick="activateRadioButton(this);">Plan A</a> 
<input type="radio" name="radio" id="radio b" /><a id="b" onclick="activateRadioButton(this);">Plan B</a>

Open in new window


All you have to do to make this work for other radio selections is to make sure the id is "radio " followed by a unique value, and set the anchor's id to that unique value.

Let me know if you have any further questions.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40531745
Oops.

Thanks for the correction, Jim.
0
 
LVL 4

Accepted Solution

by:
Jim Riddles earned 500 total points
ID: 40534216
Okay, after some further checking, this does not require Javascript to work, at all.  Following is the HTML that you need to use to make it work.

<input type="radio" name="radio" id="a" value="a" /><label for="a"> Plan A</label>
<input type="radio" name="radio" id="b" value="b" /><label for="b"> Plan A</label>

Open in new window


Note, that this method still requires each radio element to have a unique id assigned.  The "for=" part of the label references the id of the radio element that you want selected.
0
 

Author Closing Comment

by:Dao Nguyen
ID: 40536741
Thanks very much Jim. This is what I want, non-js version
0

Featured Post

Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

Question has a verified solution.

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

When deciding to adopt any help desk solutions many factors should be explored before taking decisions. This will change from business to another but in general there are some kind of rule of thumb. Here are some quick tips: Do we need only ticket…
In this short web based tutorial, I wanted to show users how they can still use the powers of FrontPage in conjunction with Expression Web 3.  Even though Microsoft eliminated the use of Web components, we can still use them with FrontPage and edit …
The purpose of this video is to demonstrate how to properly insert a Vimeo Video into a WordPress site or Blog. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp…
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…

911 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

22 Experts available now in Live!

Get 1:1 Help Now