Menu
Is there please a simple way to make a radio button toggle - when a text near it is clicked - without introducing any big Javascript Framework into my smal PHP project?
The web form looks like this:
<html>
<body>
<form method="post">
<p>Mode:<br />
<input type="radio" name="mode" value="create"><i>create table</i><br />
<input type="radio" name="mode" value="select" checked>select records (can specify id)<br />
<input type="radio" name="mode" value="insert">insert 1 record (must specify all)<br />
<input type="radio" name="mode" value="delete">delete records (must specify id)<br />
<input type="radio" name="mode" value="drop"><i>drop table</i><br />
</p>
<p>Id: <input type="text" name="id" size=32 maxlength=32 /> (32 hex chars)</p>
<p>Latitude: <input type="text" name="lat" size=10 /> (between -90 and 90)</p>
<p>Longitude: <input type="text" name="lng" size=10 /> (between -90 and 90)</p>
<p>Speed: <input type="text" name="spd" size=10 /> (not negative)</p>
<p><input type="submit" value="OK" /></p>
</form>
</body>
</html>
717
We can do this by providing the radio's ID attribute value in the for attribute of the <label> element. Now, you can click the associated label to select the corresponding radio button. If your radio button doesn't have an id attribute, you can wrap the radio button directly inside the <label> element.
To label a radio button, add a <label> element after the <input> element and insert a for attribute with the same value as the id of the associated <input> element. Then, write your label text in the <label> tag.
Each RadioButton has been assigned a JavaScript OnClick event handler. Note: The RadioButtons must be set with exact same name attribute values in order to make them mutually exclusive. When the RadioButton is clicked, the ShowHideDiv JavaScript function is executed.
You can check a radio button by default by adding the checked HTML attribute to the <input> element. You can disable a radio button by adding the disabled HTML attribute to both the <label> and the <input> .
You can also wrap your elements without giving them each an ID, since a <label> is implicitly for the input it contains, like this:
<label>
<input type="radio" name="mode" value="create">
<i>create table</i>
</label>
You can use <label> elements, which are designed to do exactly that:
<input type="radio" id="radCreateMode" name="mode" value="create" />
<label for="radCreateMode"><i>create table</i></label>
Wrapping the input under the label should work.
<label>
<input type="radio" name="mode" value="create"><i>create table</i>
</label>
I had trouble finding the value of the radio button using this method, an alternative is to use a hit area increasing clickable area of a button.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
