Make HTML text a clickable item

Richard Korts
Richard Korts used Ask the Experts™
on
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
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solution Only
Fixer of Problems
Most Valuable Expert 2014
Commented:
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

Richard KortsBusiness Owner / Chief Developer

Author

Commented:
Dave, that sounds pretty cool, I'll try it.

Richard
Rainer Jeschor
Most Valuable Expert 2013
Awarded 2012

Commented:
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 Gaberdirector

Commented:
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.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial