Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Tie css for click event to another input?

Posted on 2015-01-04
5
Medium Priority
?
114 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 9

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 9

Accepted Solution

by:
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.
0
 

Author Closing Comment

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

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Turn A Profile Picture Into A Cartoon Using Photoshop And Illustrator This tutorial will teach you how to make a cartoon style image out of a regular picture. I have tried to keep the tutorial as simple as possible. I used Adobe CS4 for this tuto…
Introduction In this tutorial, I'll explain how to create an animated progress meter in a wireframe prototype developed using Axure RP 7.0 - a leading prototyping tool for designing web sites and software. (For more information about Axure and gett…
The purpose of this video is to demonstrate how to create a Printer Friendly PDF on a WordPress Page. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome Screenshot” Google Chrome Extension, and SmallPDF.com Log…
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…

650 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