We Keep Coding

check one radio button with dynamic values

<input type="radio" on-click="checkDefaultLanguage" id="checkbox" >
[[names(name)]]
this is my custom input field for radio and has dynamic values in it. I am trying to select one radio at a time and deselect from the others. but I cannot find any information for this. The one I have found are either with name attribute or having static input fields.
my JS
private checkDefaultLanguage() {
const checkboxes = <HTMLInputElement>this.querySelector('#checkbox');
checkboxes.addEventListener('click', () => {
if (checkboxes.checked) {
//what is should I do inside of it to make sure only one is selected at a time.
}
});
}

Just use name on the input, all input will get assigned to 1 group
<form>
<fieldset>
<legend>Select a maintenance drone</legend>
<div>
<input type="radio" id="huey" name="drone" checked />
<label for="huey">Huey</label>
</div>
<div>
<input type="radio" id="dewey" name="drone" />
<label for="dewey">Dewey</label>
</div>
<div>
<input type="radio" id="louie" name="drone" />
<label for="louie">Louie</label>
</div>
</fieldset>
</form>

tbh i dont fully understand what you are trying to do but you could pass the button you just clicked to the function
<input type="radio" on-click="checkDefaultLanguage(this)" id="checkbox" >
In your function you could just uncheck every box no matter if it's checked or not.
After this for-loop just check the one you passed to the function.

Javascript - unselect checkboxes, items mutually exclusive

I have a group of check boxes that are all part of one array. What I require is that if the first one is selected (I don't mind), then any of the others are unselected, and vice versa - if one of the bottom three options are selected, then I don't mind needs to be unselected.
The last three options can all be selected at the same time.
This Link is similar to what I am asking to do. Any help would be appreciated
<fieldset class="checkbox">
<legend>Sitter type</legend>
<div id="field_844" class="input-options checkbox-options">
<label for="field_1071_0" class="option-label">
<input type="checkbox" name="field_844[]" id="field_1071_0" value="I don't mind">I don't mind</label>
<label for="field_1072_1" class="option-label">
<input checked="checked" type="checkbox" name="field_844[]" id="field_1072_1" value="Sitter">Sitter</label>
<label for="field_1073_2" class="option-label">
<input type="checkbox" name="field_844[]" id="field_1073_2" value="Nanny">Nanny</label>
<label for="field_1074_3" class="option-label">
<input type="checkbox" name="field_844[]" id="field_1074_3" value="Au Pair">Au Pair</label>
</div>
</fieldset>

The code is exactly the same as the link you provided.
<fieldset class="checkbox">
<legend>Sitter type</legend>
<div id="field_844" class="input-options checkbox-options">
<label for="field_1071_0" class="option-label">
<input type="checkbox" name="field_844[]" id="field_1071_0" value="I don't mind">I don't mind</label>
<label for="field_1072_1" class="option-label">
<input checked="checked" type="checkbox" name="field_844[]" id="field_1072_1" value="Sitter">Sitter</label>
<label for="field_1073_2" class="option-label">
<input type="checkbox" name="field_844[]" id="field_1073_2" value="Nanny">Nanny</label>
<label for="field_1074_3" class="option-label">
<input type="checkbox" name="field_844[]" id="field_1074_3" value="Au Pair">Au Pair</label>
</div>
</fieldset>
And then:
// We cache all the inputs except `#field_1071_0` with `:not` pseudo-class
var $target = $('input:not(#field_1071_0)');
$('#field_1071_0').on('change', function () {
// if 'i don't mind' is selected.
if (this.checked) {
// remove the 'checked' attribute from the rest checkbox inputs.
$target.prop('checked', false);
}
});
$target.on('change', function () {
// if one of the bottom three options are selected
if (this.checked) {
// then I don't mind needs to be unselected
$('#field_1071_0').prop('checked', false);
}
});
Demo: https://jsfiddle.net/426qLkrn/4/

I cannot remember an in-house feature of JavaScript or jQuery that makes it possible to solve your problem. So, you have to solve it by your own.
You can add a data attribute to your checkboxes where you list all the checkboxes (as an id) which cannot be selected at the same time with the current checkbox, e.g.:
<input type="checkbox" name="field_844[]" id="field_1071_0" value="I don't mind" data-exclude="['field_1072_1','field_1072_2','field_1072_3']" />
<input checked="checked" type="checkbox" name="field_844[]" id="field_1072_1" value="Sitter" data-exclude="['field_1071_0']" />
...
Then, you add, for example, an onchange event to each of the checkboxes. This event checks whether the checkbox has changed to checked or to unchecked. If it has changed to checked, you have to uncheck all checkboxes within the list:
document.getElementById("field_1071_0").onchange= function(e) {
if (this.checked) {
this.dataset.exclude.forEach(function (exc) {
document.getElementById(exc).checked = false;
});
}
};
Or, with jQuery:
$("#field_1071_0").change(function (e) {
if ($(this).prop("checked")) {
$(this).data('exclude').forEach(function (exc) {
$("#" + exc).prop("checked", false);
});
}
});
The good thing is: You can apply this function to each checkbox you want, e.g.:
$("input:checkbox").change(function (e) {
if ($(this).prop("checked")) {
$(this).data('exclude').forEach(function (exc) {
$("#" + exc).prop("checked", false);
});
}
});
Now, each checkbox has the desired behaviour. So, this solution is a general way to solve it.
Comment: If you do not have access to the HTML code, i.e., to the input fields to add some information like the data-attribute, you can add those information via jQuery/JavaScript too:
$("#field_1071_0").data("exclude", ['field_1072_1','field_1072_2','field_1072_3']);
$("#field_1072_1").data("exclude", ['field_1071_0']);
...

jquery prop method can be used to pragmatically check or unchecked a check box. is can be use to evaluate if a condition is true or false.
Hope this snippet will be useful
// if first check box is selected , then checkedremaining three
$("#field_1071_0").on('change', function() {
//$(this) is the check box with id field_1071_0
// checking if first checkbox is checked
if ($(this).is(":checked")) {
//opt2 is a common class for rest of the check boxes
// it will uncheck all other checkbox
$(".opt2").prop('checked', false)
}
})
//unchecking first checkbox when any of the rest check box is checked
$(".opt2").on('change', function() {
if ($(this).is(":checked")) {
$("#field_1071_0").prop('checked', false)
}
})
<!--Adding a class `opt2` to the last three checkboxes-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="checkbox">
<legend>Sitter type</legend>
<div id="field_844" class="input-options checkbox-options">
<label for="field_1071_0" class="option-label">
<input type="checkbox" name="field_844[]" id="field_1071_0" value="I don't mind">I don't mind</label>
<label for="field_1072_1" class="option-label">
<input checked="checked" type="checkbox" class="opt2" name="field_844[]" id="field_1072_1" value="Sitter">Sitter</label>
<label for="field_1073_2" class="option-label">
<input type="checkbox" name="field_844[]" class="opt2" id="field_1073_2" value="Nanny">Nanny</label>
<label for="field_1074_3" class="option-label">
<input type="checkbox" name="field_844[]" id="field_1074_3" value="Au Pair" class="opt2">Au Pair</label>
</div>
</fieldset>

How to set a default radio button with a value?

General issue: I cannot set a default radio button in my radio groups unless I remove the value attribute from the inputs.
Specifics: Each input has a value that is needed as it is being used by angular in other places in the app. So, I need to know how to set an input to default checked while retaining the values on the inputs. It has the same behavior if I try to add checked with jQuery instead of in HTML.
I have looked at several related questions including here. The specific issue is I need to have values and be able to set one input to checked as a default. The first input is set to checked, but it does not actually work unless I remove the value from that input.
Here is the HTML:
<div class="radio">
<label>
<input type="radio" ng-model="optionsRadios" id="new" value="new" checked>
New
</label>
<label>
<input type="radio" ng-model="optionsRadios" id="used" value="used">
Used
</label>
<label >
<input type="radio" ng-model="optionsRadios" id="broken" value="broken">
Broken
</label>
</div>

You have to use ng-checked="true" instead of checked
<input type="radio" ng-model="optionsRadios" id="new" value="new" ng-checked="true">
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<p>My cars:</p>
<input type="radio" ng-model="all" value="Volvo" ng-checked="true">Volvo<br>
<input type="radio" ng-model="all" value="Ford">Ford<br>
<input type="radio" ng-model="all" value="Mercedes">Mercedes
</body>
</html>

If you have a group of radio button and you want to set radio button checked based on model, then radio button which has same
value and ng-model is checked automatically.
<input type="radio"
ng-model="optionsRadio" value="1" >
<input type="radio"
ng-model="optionsRadio" value="2" >
<input type="radio"
ng-model="optionsRadio" value="3" >
If the value of optionsRadio is "2" then second radio button will be selected automatically.
In Your Case:
When u r initiating the controller all u have to do is to assign a value to your model to keep atleast one radio button selected.
Controller part:
$scope.optionsRadio = "new";
Form part:
<input type="radio" ng-model="optionsRadio" value="new" >
<input type="radio" ng-model="optionsRadio" value="used" >
<input type="radio" ng-model="optionsRadio" value="broken" >
First radio button will be selected automatically.
Note:
If value doesn't work u can use ng-value.

How create the condition in the radio button? (in jQuery Ajax)

I want to create the conditions in the radio button.
so I'm making a survey app with jquery ajax. every question has the option (radio button) and the button next to to the next question. without changing link
I want to create the conditions in the radio button. If select YES then it will go to the next question. If you select NO then the next question will pass 2
can help me please?

have you tried doing an attribute on your radio button like arnum that will track the n^th number of radio button.
<div arnum="3">
<input type="radio" skipval="3" value="yes">
<input type="radio" skipval="1" value="no">
</div>
<div arnum="4">
<input type="radio" value="something">
<input type="radio" value="else">
</div>
then:
$('div[arnum] input[type=radio][skipval]').on('click',function(){
var skipval = parseInt($(this).attr('skipval'));
var arnum = parseInt($(this).parent().attr('arnum'));
arnum++;
for(;arnum<arnum+skipval;arnum++){
$('div[arnum='+arnum+']').attr('disable','disable');
}
$('div[arnum='+arnum+']').focus();
});
this code on click skips to the next question using skipval and disables everything in between.

y this:
<input type="radio" name="test" value="1" />yes<br />
<input type="radio" name="test" value="2" />no
<div id="question2" style="display:none">
<br />Question 2<br />
</div>
<script>
$('input[name=test]').change(function () {
if ($(this).val() == 1) {
$('#question2').show();
} else {
$('#question2').hide();
}
})
</script>

How to validate radio buttons?

I created the following form:
http://jsfiddle.net/baumdexterous/GYNSu/1/
I implemented a validation script that works for many of the form elements but for some reason it's not working for the radio buttons so currently a user can submit the form without selecting one of the required radio buttons.
How can I enable validation for the radio buttons using this existing script? Thanks so much.
<ul>
<li class="required">
<label>What is the U.S. Capital? Please select your answer below:</label>
<div class="questionsone">
<input name="questionone" type="radio" value="a">a) New York<br>
<input name="questionone" type="radio" value="b">b) Washington DC<br>
<input name="questionone" type="radio" value="c">c) Seattle<br>
<input name="questionone" type="radio" value="d">d) Portland<br>
</div>
</li>
</ul>
Update: I have this JavaScript part that works with the existing validation. Trying to figure out how to add a way that will detect radio buttons:
<script>
$(function() {
var root = $("#wizard").scrollable();
// some variables that we need
var api = root.scrollable(),
drawer = $("#drawer");
// validation logic is done inside the onBeforeSeek callback
api.onBeforeSeek(function(event, i) {
// we are going 1 step backwards so no need for validation
if (api.getIndex() < i) {
// 1. get current page
var page = root.find(".page").eq(api.getIndex()),
// 2. .. and all required fields inside the page
inputs = page.find(".required :input").removeClass("error"),
// 3. .. which are empty
empty = inputs.filter(function() {
return $(this).val().replace(/\s*/g, '') == '';
});
// if there are empty fields, then
if (empty.length) {
// slide down the drawer
drawer.slideDown(function() {
// colored flash effect
drawer.css("backgroundColor", "#229");
setTimeout(function() {
drawer.css("backgroundColor", "#fff");
}, 1000);
});
// add a CSS class name "error" for empty & required fields
empty.addClass("error");
// cancel seeking of the scrollable by returning false
return false;
// everything is good
} else {
// hide the drawer
drawer.slideUp();
}
}
// update status bar
$("#status li").removeClass("active").eq(i).addClass("active");
});
// if tab is pressed on the next button seek to next page
root.find("button.next").keydown(function(e) {
if (e.keyCode == 9) {
// seeks to next tab by executing our validation routine
api.next();
e.preventDefault();
}
});
});
</script>

Have the radio button names all be the same. That groups them together. Then all you have to do is make the first one have checked="true"
<input name="question" type="radio" value="a" checked="true">a) New York<br>
<input name="question" type="radio" value="b">b) Washington DC<br>
<input name="question" type="radio" value="c">c) Seattle<br>
<input name="question" type="radio" value="d">d) Portland<br>
This makes them send at least one thing. Otherwise you have to check the selected value of the input.
Also all the text inputs could just have required attribute and that would make sure something is there. HTML5 has that as validation.
http://www.w3schools.com/tags/att_input_required.asp
EDIT
Here's a fiddle I just made using jQuery. This is the true validation you want.
http://jsfiddle.net/slyfox13/H9Dw2/

Your radios should all have the same name. In the code about, you literally have 4 different inputs each as their own form data param, not 4 radio inputs affecting one form data param.

The input names not all need to be the same, i.e. and then check that the value of questionone is not null to validate

You have to give same name for all radio input tag.
like this
<div class="questionsone">
<input name="qstn1" type="radio" value="a">a) New York<br>
<input name="qstn1" type="radio" value="b">b) Washington DC<br>
<input name="qstn1" type="radio" value="c">c) Seattle<br>
<input name="qstn1" type="radio" value="d">d) Portland<br>
</div>

Set same name to all radio buttons since Radio buttons are there for a single choice.
<input name="questionone" type="radio" value="a">a) New York<br>
<input name="questionone" type="radio" value="b">b) Washington DC<br>
<input name="questionone" type="radio" value="c">c) Seattle<br>
<input name="questionone" type="radio" value="d">d) Portland<br>
Validation using jQuery:
if($("input[type=radio,name=questionone]:checked").length >0)
{
/* do something */
}

First you need to change your radio buttons names to all be the same thing. ex
<ul>
<li class="required">
<label>What is the U.S. Capital? Please select your answer below:</label>
<div class="questionsone">
<input name="question" type="radio" value="a">a) New York<br>
<input name="question" type="radio" value="b">b) Washington DC<br>
<input name="question" type="radio" value="c">c) Seattle<br>
<input name="question" type="radio" value="d">d) Portland<br>
</div>
</li>
</ul>
So that you will only be able to select one. Next you need to create a document.ready() function. Add this code to your document.ready()
$( document ).ready(function() {
function RadioTest(){
inputs = document.getElementsByName('question');
for (index = 0; index < inputs.length; ++index) {
if(inputs[index].checked!=true){
alert("radio not selected");
return false;
}
}
}
});