All radio buttons are selected? - javascript

i have a problem with my jQuery code and my radio buttons,
if i selected one button and another he stay checked i don't know how to fix that if someone can help me to slove my problem thank you. I leave my code and screenshoot to see what actualy happend.
$("#custom").click(function() {
$(".custom").css({
"display": "block"
})
})
$("#man").click(function() {
$(".custom").css({
"display": "none"
})
})
$("#ladies").click(function() {
$(".custom").css({
"display": "none"
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" id="ladies" name="ladies" value="ladies">
<label for="ladies">Ladies</label>
<input type="radio" id="man" name="man" value="man">
<label for="man">Man</label>
<input type="radio" id="custom" name="custom" value="custom">
<label for="custom">Custom</label>
<i class="fas fa-question-circle fa-1x"></i>
<div class="custom">
<form action="#">
<select name='gender' id='gender'>
<option value='gender' disabled>Select the pronoun you are using</option>
<option value='she'>She: "Wihs her a happy brithday"</option>
<option value='he'>He: "Wish him a happy birthday!"</option>
<option value='he/she'>He / She: "Wish him / her a happy birthday!"</option>
</select>
<p class="genderTxt">The chosen pronoun is visible to everyone.</p>
<input type="text" class="optionalG" placeholder="Gender (optional)">
</form>
</div>
I do not have any error message to show up.

The name attribute on the group of radio buttons need to have the same name.
Change this:
<input type="radio" id="ladies" name="ladies" value="ladies">
<label for="ladies">Ladies</label>
<input type="radio" id="man" name="man" value="man">
<label for="man">Man</label>
<input type="radio" id="custom" name="custom" value="custom">
<label for="custom">Custom</label>
To this
<input type="radio" id="ladies" name="radioGroup" value="ladies">
<label for="ladies">Ladies</label>
<input type="radio" id="man" name="radioGroup" value="man">
<label for="man">Man</label>
<input type="radio" id="custom" name="radioGroup" value="custom">
<label for="custom">Custom</label>
The name doesn't need to be "radioGroup", but it needs to be the same so the code can tell which groups of radio buttons belong together.

All <input type="radio"> tags need the same name attribute. Then it will work.
<input type="radio" id="ladies" name="gender" value="ladies" checked>
<label for="ladies">Ladies</label>
<input type="radio" id="man" name="gender" value="man">
<label for="man">Man</label>
<input type="radio" id="custom" name="gender" value="custom">
<label for="custom">Custom</label>

Related

why I can select multiple radio buttons in this form?

I have two forms
only one of them is working probably "example 2"
and both of them are almost the same in terms of functionality
"example 1" is the one in question , "example 2" works fine.
<h4>example 1<h4/>
<form class="answerFormClass" action="http://127.0.0.1:5000" method="PSOT" >
<div name="choiceDivName_0" id="choiceDivId_0">
<input type="radio" name="choice_radio_0" id="choiceId_radio_0" value="get">
<label for="choiceId_radio_0">get</label>
</div>
<div name="choiceDivName_1" id="choiceDivId_1">
<input type="radio" name="choice_radio_1" id="choiceId_radio_1" value="give">
<label for="choiceId_radio_1">give</label>
</div>
<div name="choiceDivName_2" id="choiceDivId_2">
<input type="radio" name="choice_radio_2" id="choiceId_radio_2" value="gone">
<label for="choiceId_radio_2">gone</label>
</div>
<input type="submit" name="submitBtnName" id="submitBtnid" value="CLick here"></button>
</form>
<h4>example 2<h4/>
<form action="/action_page.php">
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female"><br>
<label for="other">Other</label>
<input type="radio" name="gender" id="other" value="other"><br><br>
<input type="submit" value="Submit">
</form>
here is the code in codepen : https://codepen.io/anon/pen/zbOOMM?editors=1010
*"example 1" was created by a dynamic java script "example 2" found online*
Because radio buttons are grouped according to them having the same name, but your radio buttons all have different names. To make a group of radio buttons, give them all the same name attribute.
(Side note: You usually don't need an id attribute on radio button elements, but if you do have one, it doesn't have to be the same as its name.)
Here they are with the same name:
<h4>example 1<h4/>
<form class="answerFormClass" action="http://127.0.0.1:5000" method="PSOT" >
<div name="choiceDivName_0" id="choiceDivId_0">
<input type="radio" name="choice" id="choiceId_radio_0" value="get">
<label for="choiceId_radio_0">get</label>
</div>
<div name="choiceDivName_1" id="choiceDivId_1">
<input type="radio" name="choice" id="choiceId_radio_1" value="give">
<label for="choiceId_radio_1">give</label>
</div>
<div name="choiceDivName_2" id="choiceDivId_2">
<input type="radio" name="choice" id="choiceId_radio_2" value="gone">
<label for="choiceId_radio_2">gone</label>
</div>
<input type="submit" name="submitBtnName" id="submitBtnid" value="CLick here">
</form>

Clicked state; styling on groups of form controls

I have a group of radio controls in a form. Each one is wrapped in a <label> element for styling.
When the page loads, each label has a background color set on it via CSS.
I want a user to be able to click on any radio button from the group toggling it's parent <label> background color.
From a UX point of view, I need each checked control to have it's parent label background color toggled. I need this throughout the group of radio controls.
<form>
<label>
<input type="radio" name="question1">
</label>
<label>
<input type="radio" name="question1">
</label>
<label>
<input type="radio" name="question1">
</label>
<label>
<input type="radio" name="question2">
</label>
<label>
<input type="radio" name="question2">
</label>
<label>
<input type="radio" name="question2">
</label>
<label>
<input type="radio" name="question3">
</label>
<label>
<input type="radio" name="question3">
</label>
<label>
<input type="radio" name="question3">
</label>
My approach;
I'm aware one cant select a parent element using CSS so it's off to jQuery.
Using jQuery, I can apply some logic to the entire set of radio buttons like so:
$(':radio').each( function (i, el) {
$(this).on('change', function(){
if($(this).is(':checked')){
$(this).parent().css('background', '#ba9bc9');
}
$(this).on('blur', function(){
$(this).parent().css('background', '#09afed');
});
});
});
This works, however it only works for the current element selected. Clicking away loses focus. I need it to maintain state throughout the entire set of questions. So questions #1 - #3 could all end up with coloured backgrounds potentially.
You can find the radios with the same name, and remove the class from them, before adding the class to the radio that was clicked.
var $radios = $(':radio');
$radios.on('click', function(e){
$radios.filter('[name="'+ e.target.name +'"]').not(e.target).parent().removeClass('selected');
$(e.target).parent().addClass('selected');
});
.selected {
background-color: red; //or whatever
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="radio" name="question1">
</label>
<label>
<input type="radio" name="question1">
</label>
<label>
<input type="radio" name="question1">
</label>
<label>
<input type="radio" name="question2">
</label>
<label>
<input type="radio" name="question2">
</label>
<label>
<input type="radio" name="question2">
</label>
<label>
<input type="radio" name="question3">
</label>
<label>
<input type="radio" name="question3">
</label>
<label>
<input type="radio" name="question3">
</label>
If you are able and willing to refacter your code you can do this purely with css:
label {
background: #ccc;
}
[type="radio"]:checked+label {
background: #b00;
}
<form>
<input id="lbl01" type="radio" name="question1">
<label for="lbl01">01</label>
<input id="lbl02" type="radio" name="question1">
<label for="lbl02">02</label>
<input id="lbl03" type="radio" name="question1">
<label for="lbl03">03</label>
<br/>
<input id="lbl04" type="radio" name="question2">
<label for="lbl04">04</label>
<input id="lbl05" type="radio" name="question2">
<label for="lbl05">05</label>
<input id="lbl06" type="radio" name="question2">
<label for="lbl06">06</label>
<br/>
<input id="lbl07" type="radio" name="question3">
<label for="lbl07">07</label>
<input id="lbl08" type="radio" name="question3">
<label for="lbl08">08</label>
<input id="lbl09" type="radio" name="question3">
<label for="lbl09">09</label>
</form>

html input box disappear

I have this simple html form. with 3 radio box options.
The last radio box option is 'others'
I want the text box to input other reasons to appear only when then 'other's combo box is selected. is there any way to do that?
<html>
<body>
<div class="form-group">
<input type="radio" name="option" value="a"> Missing deadline.<br>
<input type="radio" name="option" value="b"> Unsatisfied with the work.<br>
<input type="radio" name="option" value="c"> No response from Accountant.<br>
<input type="radio" name="option" value="d"> Other reasons. <br>
<input autofocus type="text" id="reason" name="reason" placeholder="Please key in the reasons.">
</div>
<body>
</html>
Give it a try.
function showTextbox() {
document.getElementById("reason").style.display = "block";
}
<html>
<body>
<div class="form-group">
<input type="radio" name="option" value="a"> Missing deadline.<br>
<input type="radio" name="option" value="b"> Unsatisfied with the work.<br>
<input type="radio" name="option" value="c"> No response from Accountant.<br>
<input type="radio" name="option" value="d" onclick="showTextbox()"> Other reasons. <br>
<input autofocus type="text" id="reason" name="reason" placeholder="Please key in the reasons." style="display:none">
</div>
<body>
</html>
Here is a solution using jQuery, by setting an on-change event to the checkbox:
$("#test").change(function(){
$("#hidden").show()
});
#hidden {display: none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click Me
<input type="checkbox" id="test">
<div id="hidden">alec</div>

Radio buttons in the form, if one checked then unchecked the others?

I have three different group of radio buttons in my form. If I click on the radio button I don't see attribute checked set to true. I'm wondering what is the best way to handle this in JQuery/JavaScript? Here is example:
$("input[type=radio]").on('click', function() {
var secondClick = true;
$(this).change(function() {
secondClick = false;
});
$(this).click(function() {
if (secondClick) {
$(this).prop("checked", false);
}
secondClick = true;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myForm" id="myForm" method="POST" action="#">
<div class="formItem">
<label for="evaluation">Evaluation</label>
<input type="radio" name="frm_eval" id="frm_eval1" value="0" />Yes
<input type="radio" name="frm_eval" id="frm_eval2" value="1" />No
</div>
<div class="formItem">
<label for="conditions">Conditions</label>
<input type="radio" name="frm_cond" id="frm_cond1" value="0" />Good
<input type="radio" name="frmhs_cond" id="frm_cond2" value="1" />Fair
<input type="radio" name="frm_cond" id="frm_cond3" value="2" />Poor
</div>
<div class="formItem">
<label for="responses">Responses</label>
<input type="radio" name="frm_res" id="frm_res1" value="0" />Good
<input type="radio" name="frm_res" id="frm_res2" value="1" />Fair
<input type="radio" name="frm_res" id="frm_res3" value="2" />Poor
</div>
</form>
Function above did not change/set the attribute checked=true on the element that I clicked. I would like to see selected element with an attribute checked true and all other check boxes to be set to false.
var radioInputs = $("#myForm input[type=radio]")
radioInputs.on('change',function() {
var $this = $(this)
if ($this.is(':checked')) {
radioInputs.not($this).removeAttr('checked')
}
})
Your second input in conditions was named frmhs_cond instead of frm_cond
<form name="myForm" id="myForm" method="POST" action="#">
<div class="formItem">
<label for="evaluation">Evaluation</label>
<input type="radio" name="frm_eval" id="frm_eval1" value="0" />Yes
<input type="radio" name="frm_eval" id="frm_eval2" value="1" />No
</div>
<div class="formItem">
<label for="conditions">Conditions</label>
<input type="radio" name="frm_cond" id="frm_cond1" value="0" />Good
<input type="radio" name="frm_cond" id="frm_cond2" value="1" />Fair
<input type="radio" name="frm_cond" id="frm_cond3" value="2" />Poor
</div>
<div class="formItem">
<label for="responses">Responses</label>
<input type="radio" name="frm_res" id="frm_res1" value="0" />Good
<input type="radio" name="frm_res" id="frm_res2" value="1" />Fair
<input type="radio" name="frm_res" id="frm_res3" value="2" />Poor
</div>
</form>

Angularjs radio selection as checked

I am trying to create selection when new user is created it will need a group. It is working nicely, but the "checked" option doesn't work for some reason. How can I make the "user" as checked so it would be true if create new user button is pressed?
<div class="radio-group" required>
<h3>Set user group</h3>
<label class="radio-inline">
<input type="radio" name="groupradio" value="2" ng-model="groups.group" required> Admin
</label>
<label class="radio-inline">
<input type="radio" name="groupradio" value="1" ng-model="groups.group" checked> User
</label>
<label class="radio-inline">
<input type="radio" name="groupradio" value="3" ng-model="groups.group"> Viewer
</label>
</div>
<button class="btn-sonera" ng-click="createUser(user, groups)"><i class="fa fa-floppy-o" aria-hidden="true"></i> Create user</button>
With AngularJs best is use its directive:
ng-checked="variable"
I managed to make it checked with ng-init="groups.group=1" Because I need the value assigned to the radio. Is there something wrong using it this way?
Full code
<div class="radio-group" required>
<h3>Set user group</h3>
<label class="radio-inline">
<input type="radio" name="groupradio" value="2" ng-model="groups.group" required> Admin
</label>
<label class="radio-inline">
<input type="radio" name="groupradio" value="1" ng-model="groups.group" ng-init="groups.group=1"> User
</label>
<label class="radio-inline">
<input type="radio" name="groupradio" value="3" ng-model="groups.group"> Viewer
</label>
</div>
Here is a working plunker: https://plnkr.co/edit/4VtblBSWROLTETW5Ie5C?p=preview
The core code:
$scope.groups = {
admin : false,
user: false,
viewer: false
};
And in the view:
<button class="btn-sonera" ng-click="groups.user=true"><i class="fa fa-floppy-o" aria-hidden="true"></i> Create user</button>
Note how each ng-model is bound to an object, ie: groups.admin, groups.user etc.
Could you please try by using ng-value
<label>
<input type="radio" ng-model="groups.group" value="1">
Admin
</label><br/>
<label>
<input type="radio" ng-model="groups.group" value="2">
User
</label><br/>
<label>
<input type="radio" ng-model="groups.group" value="3">
Viewer
</label><br/>
in controller
$scope.createUser = function(user, groups){
groups.group = "2";
};

Categories

Resources