I'm having following markup:
<div class="controls">
<input type="radio" id="sex" name="sex" value="m"> Boy
<input type="radio" id="sex" name="sex" value="f"> Girl
<input type="radio" id="sex" name="sex" value="t"> Twins
</div>
How can I select each radio button and it's subsequent text. My goal is to wrap both in a label, so the output would be:
<div class="controls">
<label><input type="radio" id="sex" name="sex" value="m"> Boy</label>
<label><input type="radio" id="sex" name="sex" value="f"> Girl</label>
<label><input type="radio" id="sex" name="sex" value="t"> Twins</label>
</div>
Unfortunately, the markup is created by a CMS. (It also adds id="sex" multiple times, blergh).
The shortest I can think of:
$('.controls :radio').each(function() {
$(this).add(this.nextSibling).wrapAll('<label>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="controls">
<input type="radio" id="sex" name="sex" value="m"> Boy
<input type="radio" id="sex" name="sex" value="f"> Girl
<input type="radio" id="sex" name="sex" value="t"> Twins
</div>
Related
I am trying to send the radio button value to Controller via ajax request, and so far nothing works
<input class="form-check-input" type="radio" class="gender" name="gender" id="Female" value="Female">
<label class="form-check-label" for="Female">Female</label><br>
<input class="form-check-input" type="radio" class="gender" name="gender" id="Male" value="Male">
<label class="form-check-label" for="Male"> Male </label><br>
<input class="form-check-input " type="radio" class="gender" name="gender" id="Other" value="Other">
<label class="form-check-label" for="Other">Other</label><br>
I tried with the following methods that do not work for me:
$('.gender:checked').val();
$('input[name="gender"]:selected').val();
$('#gender').val();
Any help?
You should be responding to an event for example a click or an onchange event see more here:
<input class="form-check-input" type="radio" class="gender" name="gender" id="Female" value="Female" />
<label class="form-check-label" for="Female">Female</label><br>
<input class="form-check-input" type="radio" class="gender" name="gender" id="Male" value="Male" />
<label class="form-check-label" for="Male"> Male </label><br>
<input class="form-check-input " type="radio" class="gender" name="gender" id="Other" value="Other" />
<label class="form-check-label" for="Other">Other</label><br>
$("input[type='radio']").click((ev) => {
console.log("click",ev.currentTarget.attributes.value.value);
})
$("input[type='radio']").change((ev) => {
console.log("change",ev.target.attributes.value.value);
})
jsfiddle
In order to identidy the value of each field, use #id instead of .ClassName,
$('#Female:checked').val();
$('#Male').val();
$('#Other').val();
otherwise, you can use radio buttons
<div>
<button id="id1" class="button">button1</button>
<button id="id2" class="button">button2</button>
<button id="id3" class="button">button3</button>
</div>
<div>
<form action="" id="formId1">
<input type="radio" name="gender" id="id1" value="male"> Male<br>
<input type="radio" name="gender" id="id1" value="male"> female<br>
<input type="radio" name="gender" id="id1" value="male"> others<br>
</form>
</div>
<div>
<form action="" id="formId2">
<input type="radio" name="gender" id="id2" value="male"> Male<br>
<input type="radio" name="gender" id="id2" value="male"> female<br>
<input type="radio" name="gender" id="id2" value="male"> others<br>
</form>
</div>
<div>
<form action="" id="formId3">
<input type="radio" name="gender" id="id3" value="male"> Male<br>
<input type="radio" name="gender" id="id3" value="male"> female<br>
<input type="radio" name="gender" id="id3" value="male"> others<br>
</form>
</div>
If input with id id1 is selected in form with id formId1 then color of button with id id1 should be change and If input with id id2 is selected in form with id formId2 then color of button with id id2 should be change and same for third button also.
You can call function on click to set the button color,
<input type="radio" name="gender" id="id1" onclick="handleClick('id1')" value="male"> Male<br>
In this code we have added onclick="handleClick('id1')"
handleClick =function(id){
// uncomment if you want to reset other button
/*
for(var i=1 ;i<4;i++){
var button = document.getElementById("id"+i);
button.style.backgroundColor = "buttonface";
}*/
var property = document.getElementById(id);
property.style.backgroundColor = "red";
}
<div>
<button id="id1" class="button">button1</button>
<button id="id2" class="button">button2</button>
<button id="id3" class="button">button3</button>
</div>
<div>
<form action="" id="formId1">
<input type="radio" name="gender" id="id1" onclick="handleClick('id1')" value="male"> Male<br>
<input type="radio" name="gender" id="id1"onclick="handleClick('id1')" value="male"> female<br>
<input type="radio" name="gender" id="id1"onclick="handleClick('id1')" value="male"> others<br>
</form>
</div>
<div>
<form action="" id="formId2">
<input type="radio" name="gender" id="id2" onclick="handleClick('id2')" value="male"> Male<br>
<input type="radio" name="gender" id="id2" onclick="handleClick('id2')" value="male"> female<br>
<input type="radio" name="gender" id="id2" onclick="handleClick('id2')" value="male"> others<br>
</form>
</div>
<div>
<form action="" id="formId3">
<input type="radio" name="gender" id="id3" onclick="handleClick('id3')" value="male"> Male<br>
<input type="radio" name="gender" id="id3" onclick="handleClick('id3')" value="male"> female<br>
<input type="radio" name="gender" id="id3" onclick="handleClick('id3')" value="male"> others<br>
</form>
</div>
<div>
<button id="id1" class="button">button1</button>
<button id="id2" class="button">button2</button>
<button id="id3" class="button">button3</button>
</div>
<div>
<form action="" id="formId1">
<label><input type="radio" name="gender" value="male" onchange="setColor('id1')"> Male</label><br>
<label><input type="radio" name="gender" value="male" onchange="setColor('id1')"> female</label><br>
<label><input type="radio" name="gender" value="male" onchange="setColor('id1')"> others</label><br>
</form>
</div>
<div>
<form action="" id="formId2">
<label><input type="radio" name="gender" value="male" onchange="setColor('id2')"> Male</label><br>
<label><input type="radio" name="gender" value="male" onchange="setColor('id2')"> female</label><br>
<label><input type="radio" name="gender" value="male" onchange="setColor('id2')"> others</label><br>
</form>
</div>
<div>
<form action="" id="formId3">
<label><input type="radio" name="gender" value="male" onchange="setColor('id3')"> Male</label><br>
<label><input type="radio" name="gender" value="male" onchange="setColor('id3')"> female</label><br>
<label><input type="radio" name="gender" value="male" onchange="setColor('id3')"> others</label><br>
</form>
</div>
<script>
function setColor(target){
document.getElementById(target).style.backgroundColor = "blue";
}
</script>
I'm developing an application that display 2 graphs and contain radio buttons to change the time interval.
What i'm trying to do is, for example, if i select monthly in the 2nd set of radio buttons the first set should also have that option check.
<div class="panel-radio-buttons">
<form id="SettingMixRadioButtonsGroup1">
<label class="radio-inline"><input type="radio" name="radio1" value="1" id="BtnEnrollmentsInpatient"
ng-model="togglePefsBifsTimeFrame" ng-change='SetDay()'>Daily</label>
<label class="radio-inline"><input type="radio" name="radio1" value="2" id="BtnEnrollmentsInpatient2"
ng-model="togglePefsBifsTimeFrame" ng-change='SetWeek()' >Weekly</label>
<label class="radio-inline"><input type="radio" name="radio1" value="3" id="BtnEnrollmentsInpatient3"
ng-model="togglePefsBifsTimeFrame" ng-change='SetMonth()'>Monthly</label>
</form>
</div>
<div class="panel-radio-buttons">
<form id="SettingMixRadioButtonsGroup2">
<label class="radio-inline"><input type="radio" name="radio1" value="1" id="BtnEnrollmentsInpatient4"
ng-model="togglePefsBifsTimeFrame" ng-change='SetDay()'>Daily</label>
<label class="radio-inline"><input type="radio" name="radio1" value="2" id="BtnEnrollmentsInpatient5"
ng-model="togglePefsBifsTimeFrame" ng-change='SetWeek()' ng-checked="togglePefsBifsTimeFrame2" >Weekly</label>
<label class="radio-inline"><input type="radio" name="radio1" value="3" id="BtnEnrollmentsInpatient6"
ng-model="togglePefsBifsTimeFrame" ng-change='SetMonth()'>Monthly</label>
</form>
</div>
I've tried to checked using the following code in JS:
$scope.SetDay= function(){
document.getElementById("SettingMixRadioButtonsGroup1").child[0].checked = true;
document.getElementById("SettingMixRadioButtonsGroup2").child[0].checked = true;
};
But It won't perform the check on the child element... if i use the parent it works fine but its not a very scalable solution
This creates a handler for the change event for the radio buttons. It selects all radio buttons under panel-radio-buttons which have the same value attribute and sets their checked property to that of the element which triggered the event.
$("input[type=radio][name=radio1]").change(function() {
var val = $(this).attr("value");
var radio = $(".panel-radio-buttons input[type=radio][name=radio1][value=" + val + "]");
radio.prop("checked", $(this).is(":checked"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-radio-buttons">
<form id="SettingMixRadioButtonsGroup1">
<label class="radio-inline">
<input type="radio" name="radio1" value="1" id="BtnEnrollmentsInpatient" ng-model="togglePefsBifsTimeFrame" ng-change='SetDay()'>Daily</label>
<label class="radio-inline">
<input type="radio" name="radio1" value="2" id="BtnEnrollmentsInpatient2" ng-model="togglePefsBifsTimeFrame" ng-change='SetWeek()'>Weekly</label>
<label class="radio-inline">
<input type="radio" name="radio1" value="3" id="BtnEnrollmentsInpatient3" ng-model="togglePefsBifsTimeFrame" ng-change='SetMonth()'>Monthly</label>
</form>
</div>
<div class="panel-radio-buttons">
<form id="SettingMixRadioButtonsGroup2">
<label class="radio-inline">
<input type="radio" name="radio1" value="1" id="BtnEnrollmentsInpatient4" ng-model="togglePefsBifsTimeFrame" ng-change='SetDay()'>Daily</label>
<label class="radio-inline">
<input type="radio" name="radio1" value="2" id="BtnEnrollmentsInpatient5" ng-model="togglePefsBifsTimeFrame" ng-change='SetWeek()' ng-checked="togglePefsBifsTimeFrame2">Weekly</label>
<label class="radio-inline">
<input type="radio" name="radio1" value="3" id="BtnEnrollmentsInpatient6" ng-model="togglePefsBifsTimeFrame" ng-change='SetMonth()'>Monthly</label>
</form>
</div>
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();
});
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>
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>
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>
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)
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>
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>
I have a number of radio buttons that I'd like the user to be able to tab to, then use the arrow keys to select.
Once they have chosen the radio button, I'd like them to tab to the next set and the previous set will hide.
$("input").blur(function(){ $(this).closest('div').slideUp(); });
So, if you click the radio button in the first section, then click the radio button in the second section, the first section hides. This is great.
The issue I have is that any time anyone uses the arrow keys to select the next input in the same section, it hides the whole section.
http://codepen.io/EightArmsHQ/pen/qdzXLw
How can I create a blur function that will only fire when you leave a group of radio buttons, not any individual input?
You need to check if tab key is press or not try this
<div>
<h4>Question 1</h4>
<p><label for=""><input type="radio" name="question-1" value="1" />Answer 1</label></p>
<p><label for=""><input type="radio" name="question-1" value="2" />Answer 2</label></p>
<p><label for=""><input type="radio" name="question-1" value="3" />Answer 3</label></p>
<p><label for=""><input type="radio" name="question-1" value="4" />Answer 4</label></p>
<p><label for=""><input type="radio" name="question-1" value="5" />Answer 5</label></p>
<p><label for=""><input type="radio" name="question-1" value="6" />Answer 6</label></p>
</div>
<div>
<h4>Question 1</h4>
<p><label for=""><input type="radio" name="question-2" value="1" />Answer 1</label></p>
<p><label for=""><input type="radio" name="question-2" value="2" />Answer 2</label></p>
<p><label for=""><input type="radio" name="question-2" value="3" />Answer 3</label></p>
<p><label for=""><input type="radio" name="question-2" value="4" />Answer 4</label></p>
<p><label for=""><input type="radio" name="question-2" value="5" />Answer 5</label></p>
<p><label for=""><input type="radio" name="question-2" value="6" />Answer 6</label></p>
</div>
<script>
$(document).keydown(function (event) {
switch (event.keyCode) {
case 9:
$("input[type='radio']").blur(function () {
$(this).closest('div').slideUp();
});
break;
}
});
$("input[type='radio']").blur(function () {
$('body').append('Focus lost');
});
</script>
Hope this will help you.