Develop Reference

Check or uncheck all radio inputs by id on radio yes/no selection

My issue is that i cannot edit the form code output so would like to target radio ids to check or uncheck depending on if a different radio button is selected. Would this is be possible? - i can add a function call on the tag or use jquery - but i cannot edit the form code itself like adding onclick events.
Pseudo code would be:
If #unsubYes is checked Then
uncheck #option1Yes + #option2Yes AND
check #option1No + #option2No
If #unsubNo is checked Then
uncheck #option1No + #option2No AND
check #option1Yes + #option2Yes
Link to JS fiddle html
Any help appreciated.
Cheers,
Chris

$("[name='unsub']").on('change', function(){
var val = $(this).val();
var reverseVal = (val == 'Yes' ? 'No' : 'Yes')
$("input[value='"+reverseVal+"']:not([name='unsub'])").prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<span>Option 1</span><br />
<label>
<input type="radio" name="option1" id="option1Yes" value="Yes">
Yes
</label>
<label>
<input type="radio" name="option1" id="option1No" value="No">
No
</label>
<br /><br />
<span>Option 2</span><br />
<label>
<input type="radio" name="option2" id="option2Yes" value="Yes">
Yes
</label>
<label>
<input type="radio" name="option2" id="option2No" value="No">
No
</label>
<hr />
<span>Unsubscribe from all</span><br />
<label>
<input type="radio" name="unsub" id="unsubYes" value="Yes">
Yes
</label>
<label>
<input type="radio" name="unsub" id="unsubNo" value="No">
No
</label>
<br /><br />
<input type="submit" value="submit">
</form>

Yes of course is possible.
You could do something similar like this
document.querySelector('#unsubYes').addEventListener('change', function() {
if (this.checked) {
// do something if is checked
} else {
// do other thins
}
});

How to check all checkboxes using JS?

I want to check all checkboxes using javascript. When I click on submit button all the checkboxes should be checked. However all the checkboxes are checked just for a few seconds.
What am I doing wrong?
html:
<form method="post" name="myform">
<input type="checkbox" name="h" value="1" id="g">Reading<br/>
<input type="checkbox" name="h" value="2" id="g">php<br/>
<input type="checkbox" name="h" value="3" id="g">playing<br/>
<input type="checkbox" name="h" value="4" id="g">Gaming<br/>
<input type="checkbox" name="h" value="5" id="g">Coding<br/>
<input type="submit" name="sub" value="submit" onclick="checkall(document.myform.h)" >
</form>
javascript code:
<script type="text/javascript">
function checkall(chk){
for(var i = 0; i < chk.length; i++) {
chk[i].checked = true;
}
}
</script>

the problem is you are using a submit button within a form, which on click will submit the form.
So one solution is to change the button form a submit button to a normal button which will not trigger the submit of the form.
function checkall(chk) {
var i;
for (i = 0; i < chk.length; i++) {
chk[i].checked = true;
//return true;
}
}
<form method="post" name="myform">
<input type="checkbox" name="h" value="1" id="g">Reading
<br/>
<input type="checkbox" name="h" value="2" id="g">php
<br/>
<input type="checkbox" name="h" value="3" id="g">playing
<br/>
<input type="checkbox" name="h" value="4" id="g">Gaming
<br/>
<input type="checkbox" name="h" value="5" id="g">Coding
<br/>
<!--<input type="radio" name="gen" value="male">Male<br/>-->
<!--<input type="radio" name="gen" value="female">Female<br/>-->
<input type="button" name="sub" value="submit" onclick="checkall(document.myform.h)">
</form>

You created a form.And form will be submit after click on submit button.You can use following approach to select all checkbox only.
step 1- Write following statement in html.
<input type="checkbox" name="h" value="1" class="g">Reading<br/>
<input type="checkbox" name="h" value="2" class="g">php<br/>
<input type="checkbox" name="h" value="3" class="g">playing<br/>
<input type="checkbox" name="h" value="4" class="g">Gaming<br/>
<input type="checkbox" name="h" value="5" class="g">Coding<br/>
<input type="button" name="sub" value="check all" id='custom_button'>
step 2- Write following statement in js file-
jQuery('#custom_button').click(function(){
jQuery('.g').each(function() { //loop through each checkbox
this.checked = true; //deselect all checkboxes with class "checkbox1"
});
});
Above statement will select all checkbox after click on button.
If you want to check example please use this link - http://jsfiddle.net/oxg3p1ny/1/

your code is working just stop from form submit will solve your problem use <form method="post" name="myform" onsubmit="return false"> and use ajax to get data.
Working Fiddle

Enabling and disabling checkboxes with javascript

I have been trying to figure out the solution to my problem for a few hours now. I'm still fairly new to Javascript, so please forgive me if I sound stupid. Sadly I don't know jQuery and I'm starting to think that it's inhibiting me to come up with a solution.
What I am trying to do is have a check box that enables disabled radio buttons. If that makes sense.
Example:
Choice 1
sub choice
sub choice
sub choice
I would like to be able to click the first checkbox (Choice 1) to enable the sub choices. If it's not clicked, the sub choices should be disabled. :-)
Here is what I've got so far:
<script>
function enableRadios(x) {
var formElement = eval("checkbox" + x)
if (formElement[0].disabled) {
formElement[0].disabled = false
formElement[1].disabled = false
} else {
formElement[0].disabled = true
formElement[1].disabled = true
}
}</script>
<body><input type="checkbox" name="main" value="main" onClick="enableRadios(x)">
<input disabled type="radio" value="1" name="x">
<input disabled type="radio" value="2" name="x">
<input disabled type="radio" value="3" name="x">
<input disabled type="radio" value="4" name="x">
<input disabled type="radio" value="5" name="x">
<input disabled type="radio" value="6" name="x"></body>
I really appreciate your help!

You need to pass a string containing the radio name 'x', not pass a variable x:
<script>
function toggleRadios(name) {
var elems = document.getElementsByName(name);
for(i=0; i<elems.length; i++) {
elems[i].disabled = !elems[i].disabled;
}
}
</script>
<input type="checkbox" name="main" value="main" onclick="toggleRadios('x')">
<input disabled type="radio" value="1" name="x">
<input disabled type="radio" value="2" name="x">
<input disabled type="radio" value="3" name="x">
<input disabled type="radio" value="4" name="x">
<input disabled type="radio" value="5" name="x">
<input disabled type="radio" value="6" name="x">
http://jsfiddle.net/samliew/B6tF7/

JavaScript radio buttons

I have a few radio buttons, and when I select one of them, I also have to check another one.
For example, if I select yes on a radio button, another radio button must be automatically checked with no.
I tried a few scripts but don't seem to work.
Does anyone know a solution? I'm new in JS.
Thanks in advance!

　　　　　　　 　　　　　>　Live Demo　<　　　　 　　　　　　　 　
<!--HTML-->
<input type="radio" name="group_1" value="yes" id="r1">Yes<br>
<input type="radio" name="group_1" value="no" id="r2">No<br>
<br>
<input type="radio" name="group_2" value="yes" id="r3">Yes<br>
<input type="radio" name="group_2" value="no" id="r4">No<br>​
//Script
$("input[name='group_1']").click(function(){
if(this.value=="yes"){
$("input#r4").attr("checked",true);
}else{
$("input#r3").attr("checked",true);
}
});
$("input[name='group_2']").click(function(){
if(this.value=="yes"){
$("input#r2").attr("checked",true);
}else{
$("input#r1").attr("checked",true);
}
});​

I'm not very certain on what you are trying to achieve but by using the "name" attribute this automatically happens...when you check one radio...the others with the same name get set to unchecked.
<input type="radio" name="someoption" value="0" />0
<input type="radio" name="someoption" value="1" />1
<input type="radio" name="someoption" value="2" />2
checking any one of the above will cause the other 2 to be unchecked
unless do you may be mean checkboxes or multiple option sets ?

javascript:
$('#myradio1').bind('change', function () {
$('#myradio3').attr('checked', 'checked');
});
html
<input type="radio" name="cols1" value="1" id="myradio1" />
<input type="radio" name="cols1" value="2" id="myradio2" />
<input type="radio" name="cols2" value="1" id="myradio3" />
<input type="radio" name="cols2" value="2" id="myradio4" />
see working example at http://jsfiddle.net/9jXbv/

For HTML markup like below:
<div>
<input type="radio" name="one" value="yes"> yes
<input type="radio" name="one" value="no"> no
</div>
<div>
<input type="radio" name="two" value="yes"> yes
<input type="radio" name="two" value="no"> no
</div>
you can use this JavaScript code:
$(":radio").on("change", function() {
var that = this;
$(":radio").filter(function() {
return this.value == "no" && this.name != that.name;
}).prop("checked", true);
});​
DEMO: http://jsfiddle.net/nKLMX/

With jquery:
​$("#radio1").change(function() {
$("#radio2").removeAttr("checked");
});​​​
http://jsfiddle.net/

I've mocked up a pure JS solution to this ( No libraries )
<input type="radio" name="g1" value="1" />Yes
<br />
<input type="radio" name="g1" value="0" />No
<br /><br />
<input type="radio" name="g2" value="1" />Yes
<br />
<input type="radio" name="g2" value="0" />No
<script type="text/javascript">
var g1 = document.getElementsByName('g1'); // store g1 elements
var g2 = document.getElementsByName('g2'); // store g2 elements
// handle click functionality
function radio_checked_event(obj, f) {
if(obj.addEventListener) {
obj.addEventListener('click', f, false);
} else if(obj.attachEvent) {
obj.attachEvent('onclick', f);
}
}
// when you click on g1 yes
radio_checked_event(g1[0], function() {
//set g1 no to checked
g2[1].setAttribute('checked', 'checked');
});
</script>

What's the simplest way to update these form fields with JQuery?

I have the following html form:
<form>
<input type="checkbox" name="fruits[]" value="apples" /><input type="text" value="false" /><br/>
<input type="checkbox" name="fruits[]" value="oranges" /><input type="text" value="false" /><br/>
<input type="checkbox" name="fruits[]" value="grapes" /><input type="text" value="false" /><br/>
<input type="checkbox" name="fruits[]" value="bananas" /><input type="text" value="false" /><br/>
</form>
Now I want to write some javascript/JQuery such that when I check or uncheck a checkbox, the corresponding text box shows "true" or "false". It should be easy to add more fruits without changing the javascript.
What's the best way to do this in an elegant way?

this is easy in pure javascript, you don't really need jQuery. Just assign onchange event of each checkbox with a function that would update the textfield, there has to be a relation between the checkbox and textfield. The function could be something like:
// assign to onchange like: onchange="updateTextField(this)"
function updateTextField(cb) {
// this assumes that the corresponding text field has id with the same name as the
// checkbox value
var tf = document.getElementById(cb.value);
tf.value = cb.checked.toString();
}

You need to have some sort of relationship between the checkbox and the text field. Something like this would work using jQuery, and is extremely extendable.
<form>
<input type="checkbox" value="apples" /><input type="text" value="false" for="apples"/><br/>
<input type="checkbox" value="oranges" /><input type="text" value="false" for="oranges" /><br/>
<input type="checkbox" value="grapes" /><input type="text" value="false" for="grapes" /><br/>
<input type="checkbox" value="bananas" /><input type="text" value="false" for="bananas"/><br/>
</form>
<script>
$(function() {
$(":checkbox").click(function() {
if ($(this).attr('checked')) {
$('input[for$="' + $(this).val() + '"]').val("true");
} else {
$('input[for$="' + $(this).val() + '"]').val("false");
}
})
})
</script>