Tie css for click event to another input?

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.
Dao NguyenApplication DeveloperAsked:
Who is Participating?
 
Jim RiddlesConnect With a Mentor Prepress/OMS SpecialistCommented:
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
 
Jason C. LevineNo oneCommented:
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
 
Jim RiddlesPrepress/OMS SpecialistCommented:
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
 
Jason C. LevineNo oneCommented:
Oops.

Thanks for the correction, Jim.
0
 
Dao NguyenApplication DeveloperAuthor Commented:
Thanks very much Jim. This is what I want, non-js version
0
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.

All Courses

From novice to tech pro — start learning today.