Tie css for click event to another input?

Posted on 2015-01-04
Medium Priority
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.
Question by:Dao Nguyen
  • 2
  • 2
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40530968

You write a javascript function that adds a class:

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

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.
LVL 10

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.
LVL 70

Expert Comment

by:Jason C. Levine
ID: 40531745

Thanks for the correction, Jim.
LVL 10

Accepted Solution

Jim Riddles earned 2000 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.

Author Closing Comment

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

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

When setting up new project requests for our site, one of the most powerful tools our team has available to use is Axure (http://www.axure.com/). It’s a tool for creating software and web prototypes that can function and interact as if it were the a…
Objective of This Article In 1990’s, when I was a budding software professional, I had a lot of confusion about which stream or technology, I had to choose to build my career. In those days, I had lot of confusion like whether to choose System so…
The purpose of this video is to demonstrate how to connect a WordPress website to Google Analytics. This will be demonstrated using a Windows 8 PC Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php :…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…
Suggested Courses

624 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