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.
Related
There are two radio buttons in my code:
<input type="radio" id='production' ng-click="division($event)" ng-model="formData.division" value="Production">
<label for="production">Production</label>
<input type="radio" id='operation' ng-click="division($event)" ng-model="formData.division" value="Operations">
<label for="operation">Operations</label>
And there are more radio buttons after:
<div class="prod">
<h2>Production</h2>
<label><b>Project Captain: <small id="small">*</small></b></label>
<input type="radio" class="projCap" ng-model="formData.projCap" value="yes">Yes
<input type="radio" class="projCap" ng-model="formData.projCap" value="no">No
<label><b>Supervisor: <small id="small">*</small></b></label>
<input type="radio" ng-model="formData.supervisor" value="yes">Yes
<input type="radio" ng-model="formData.supervisor" value="no">No<br><br>
</div>
<div class="op">
<h2>Operations</h2>
<label><b>Manager: <small id="small">*</small></b></label>
<input type="radio" ng-model="formData.mngr" value="yes">Yes
<input type="radio" ng-model="formData.mngr" value="no">No
<label><b>Assistant Manager: <small id="small">*</small></b></label>
<input type="radio" ng-model="formData.asMngr" value="yes">Yes
<input type="radio" ng-model="formData.asMngr" value="no">No <br><br>
</div>
I want to save time for the user so for example if user selects Production it should automatically set all radio buttons to no inside div op.
If Operations all radio buttons with value no should be selected inside div prod.
My function in controller:
$scope.division = function(event) {
if(event.target.id === 'production'){
$('.op').find('input:radio').prop('checked', true);
$('.prod').find('input:radio').prop('checked', false);
}else{
$('.prod').find('input:radio').prop('checked', true);
$('.op').find('input:radio').prop('checked', false);
}
};
It will select both yes and no values:
How can I auto select only radio buttons with no value?
Try this:
$('.op').find('input:radio[value="no"]').prop('checked', true);
and don't forget to provide the same name to all radio that comes under a group, otherwise they work as checkboxes.
Check this example:
$(document).ready(function(){
$('.op').find('input:radio[value="no"]').prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="op">
<h2>Operations</h2>
<label><b>Manager: <small id="small">*</small></b></label>
<input type="radio" name="group1" ng-model="formData.mngr" value="yes">Yes
<input type="radio" name="group1" ng-model="formData.mngr" value="no">No
<label><b>Assistant Manager: <small id="small">*</small></b></label>
<input type="radio" name="group2" ng-model="formData.asMngr" value="yes">Yes
<input type="radio" name="group2" ng-model="formData.asMngr" value="no">No <br><br>
</div>
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'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>
I have this problem: In my form i have one list of questions and this questions have multiples answers with radio buttons that have the same name.
If i have one question, no problem, but if i have two or more questions i have a lot of radio buttons with the same name.
I have this in HTML:
<label>Do you Like?</label>
<label>Yes</label>
<input type="radio" value="35" name="answer">
<label>No</label>
<input type="radio" value="36" name="answer">
<label>Are you interested?</label>
<label>Yes</label>
<input type="radio" value="35" name="answer">
<label>No</label>
<input type="radio" value="36" name="answer">
<label>Do you like repeat?</label>
<label>Yes</label>
<input type="radio" value="35" name="answer">
<label>No</label>
<input type="radio" value="36" name="answer">
I can't change the name or the value, because i need this properties to save the answer of the user.
The user select one radio and if the user select other radio of the other question, the radio of the first question change and show only one radio selected.
You need to have a different name for the radio buttons in each question. Radio buttons with the same name can only be used as one "group." Example:
<label>Do you Like?</label>
<label>Yes</label>
<input type="radio" value="35" name="like_answer">
<label>No</label>
<input type="radio" value="36" name="like_answer">
<label>Are you interested?</label>
<label>Yes</label>
<input type="radio" value="35" name="interested_answer">
<label>No</label>
<input type="radio" value="36" name="interested_answer">
change name
<label>Do you Like?</label>
<label>Yes</label>
<input type="radio" value="35" name="answer">
<label>No</label>
<input type="radio" value="36" name="answer">
<label>Are you interested?</label>
<label>Yes</label>
<input type="radio" value="35" name="answertwo">
<label>No</label>
<input type="radio" value="36" name="answertwo">
<label>Do you like repeat?</label>
<label>Yes</label>
<input type="radio" value="35" name="answertree">
<label>No</label>
<input type="radio" value="36" name="answertree">