Solved

Tie css for click event to another input?

Posted on 2015-01-04
5
110 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 5

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 5

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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

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 …
This guide will walk you through the essential considerations and tech stack for building scalable websites. Know how to grow your business the smart way!
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 prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…

705 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