CODEWITHSUNDEEP
javascriptjqueryhtml
delphirules
delphirules

Reputation: 7390

Click on label makes click on radiobutton

I want this : when the user click on the radiobutton label, it will automatically click on the radio button itself. Currently if the user clicks on the label right after the radiobutton, nothing happens, forcing the user to click on the tiny radiobutton itself.

Some people suggested to use the 'for' attribute on the label, but to do so i need to change the 'id' of the second option ; by doing this, the form will post both options as checked, so it won't work in my case.

https://jsfiddle.net/j4qzh544/2/

Here is the html :

<form href="#">
<input type="radio" id="option1" name="option1" data-label="Option one" value="1"><label class="radio-label">Option one</label>
    <input type="radio" id="option1" name="option1" data-label="Option two" value="2"><label class="radio-label">Option two</label>  
    <input type="submit"/>
</form>

To achieve this, i'm trying to use Jquery to create a click method on each label with the class 'radio-label', making a click on its radiobutton. Something like the code below, but it's not working :

 $('.radio-label').each(function (i) {
    $(this).previous().click();
});

Upvotes: 0

Views: 82

Answers (6)

yasarui
yasarui

Reputation: 6553

Put the input tag inside the label thatis enough

    <label class="radio-label"><input type="radio" id="option1" name="option1" data-label="Option one" value="1">Option one</label>
    <label class="radio-label"><input type="radio" id="option1" name="option1" data-label="Option two" value="2">Option two</label>

Upvotes: 1

Moin Shirazi
Moin Shirazi

Reputation: 4425

You dont need any js for this, simply use this

<label for="option2" class="radio-label">Option two</label>

<input type="radio" id="option1" name="option" data-label="Option one" value="1"><label class="radio-label" for="option1">Option one</label>
<input type="radio" id="option2" name="option" data-label="Option two" value="2"><label class="radio-label" for="option2">Option two</label>

Upvotes: 1

&#193;d&#225;m R&#233;v&#233;sz
&#193;d&#225;m R&#233;v&#233;sz

Reputation: 229

You should use label for.

<input type="radio" id="option1" name="option" data-label="Option one" value="1"><label class="radio-label" for="option1">Option one</label>
<input type="radio" id="option2" name="option" data-label="Option two" value="2"><label class="radio-label" for="option2">Option two</label>

Solution (no js required)

Upvotes: 1

Sagar Hani
Sagar Hani

Reputation: 166

You can wrap the input tag inside thelabel tag. Just like this : 

<label class="radio-label"><input type="radio" id="option1" name="option1" data-label="Option one" value="1">Option one
</label>
<label class="radio-label"><input type="radio" id="option1" name="option1" data-label="Option two" value="2">Option two</label>

Upvotes: 1

Satpal
Satpal

Reputation: 133403

Use for attribute of <label>.

The ID of a labelable form-related element in the same document as the label element. The first such element in the document with an ID matching the value of the for attribute is the labeled control for this label element.

<label for="option2" class="radio-label">Option two</label>


<input type="radio" id="option1" name="option1" data-label="Option one" value="1"><label for="option1" class="radio-label">Option one</label>
<input type="radio" id="option2" name="option1" data-label="Option two" value="2"><label for="option2" class="radio-label">Option two</label>

Upvotes: 6

kind user
kind user

Reputation: 41893

Actually you don't need any js or jQuery code. Just include for attribute inside the label. As it's value, provide the id of the specified radio button.

<input type="radio" id="option1" name="option1" data-label="Option one" value="1" /><label class="radio-label" for='option1'>Option one</label>
<input type="radio" id="option2" name="option1" data-label="Option two" value="2" /><label class="radio-label" for='option2'>Option two</label>

Upvotes: 3

Related Questions