Make HTML text a clickable item

Hello,

Please go to www.rkassoc.org/Lakos_config and click the "Guest Access" button. Note the next page has 3 radio button choices.

The customer wants the bolded text header item next to each radio button to act such that if it's clicked on, it checks the corresponding radio button.

What is the simplest way to do this in JavaScript?

Thanks
Richard KortsBusiness Owner / Chief DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
First add an 'onclick' to each of the spans containing the text.  Second, write simple JavaScript function that sets the selected item to be 'checked'.

http://www.w3schools.com/jsref/event_onclick.asp

http://www.w3schools.com/jsref/prop_radio_checked.asp

<script>
function setBasincheck() {
    document.getElementById("basin").checked = true;
}
</script>
<div class="col-sm-1 col-xs-1"><input type="radio" name="cltype" id="basin" value="B" ></div>
	<div class="col-sm-6 col-xs-4"><span style="font-size:16px" onclick="setBasincheck();"><b>Basin Cleaning</b></span>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
Dave, that sounds pretty cool, I'll try it.

Richard
Rainer JeschorCommented:
Hi,
or as you have jQuery already included:
$(document).ready(function() {
$("b","div.col-sm-6.col-xs-4").click(function() {$("input[name='cltype']").val([$(this).parents("div").parents("div.row").find("input[name='cltype']").val()]);});
});

Open in new window


So by just adding this script it is not necessary to add additional code depending on the different radio buttons.

@Dave: sorry I have been working on it during your post. And as that one is a nice one-liner which works :-)

HTH
Rainer
Uros GaberdirectorCommented:
Why would you do this using javascript?
You have three input's as radio buttons:
<input type="radio" value="B" id="basin" name="cltype">
<input type="radio" value="S" id="side" name="cltype">
<input type="radio" value="F" id="full" name="cltype">

Open in new window

And the bolded text is for example:
<b>Basin Cleaning</b>

Open in new window

You could just replace this with:
<label for="basin"><b>Basin Cleaning</b></label>

Open in new window

and the same for others / just note the "for" attribute that points to the ID of the input radio field - no need for javascript.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.