I imagine this should be pretty simple... anyways I have two mirrored sets of radio buttons, say set A and set B
In set a, there is button 1, 2, and 3
In set b, there is also button 1, 2, and 3
The behavior I want is when I click button 1 in set a, it automatically checks button 1 in set b.
Same for 2A and 2B, and 3A and 3B.
Can anyone explain how to do this? It seems like an extremely simple function, but apparently it's impossible to find an answer through Google and it seems like nobody's ever asked this here before either... :/
I'd like to do with HTML / Javascript. NO JQUERY.
Thanks!
Checking if(o[i].checked!=true) before setting o[i].checked=true to avoid infinite feedback.
function radioChanged(name, value) {
var n=name=="a"?"b":"a";
var o=document.getElementsByName(n);
for(var i=0; i<o.length; i++)
if(o[i].value==value)
if(o[i].checked!=true)
o[i].checked=true;
};
<input type="radio" name="a" value="1" id="A1"
onchange="radioChanged(this.name, this.value)">
<label for="A1">A1</label></input>
<input type="radio" name="a" value="2" id="A2"
onchange="radioChanged(this.name, this.value)">
<label for="A2">A2</label></input>
<input type="radio" name="a" value="3" id="A3"
onchange="radioChanged(this.name, this.value)">
<label for="A3">A3</label></input>
<hr>
<input type="radio" name="b" value="1" id="B1"
onchange="radioChanged(this.name, this.value)">
<label for="B1">B1</label></input>
<input type="radio" name="b" value="2" id="B2"
onchange="radioChanged(this.name, this.value)">
<label for="B2">B2</label></input>
<input type="radio" name="b" value="3" id="B3"
onchange="radioChanged(this.name, this.value)">
<label for="B3">B3</label></input>
Related
Is it possible to have multiple radio button groups in a single form? Usually selecting one button deselects the previous, I just need to have one of a group deselected.
<form>
<fieldset id="group1">
<input type="radio" value="">
<input type="radio" value="">
</fieldset>
<fieldset id="group2">
<input type="radio" value="">
<input type="radio" value="">
<input type="radio" value="">
</fieldset>
</form>
Set equal name attributes to create a group;
<form>
<fieldset id="group1">
<input type="radio" name="group1">value1</input>
<input type="radio" name="group1">value2</input>
</fieldset>
<fieldset id="group2">
<input type="radio" name="group2">value1</input>
<input type="radio" name="group2">value2</input>
<input type="radio" name="group2">value3</input>
</fieldset>
</form>
This is very simple you need to keep different names of every radio input group.
<input type="radio" name="price">Thousand<br>
<input type="radio" name="price">Lakh<br>
<input type="radio" name="price">Crore
</br><hr>
<input type="radio" name="gender">Male<br>
<input type="radio" name="gender">Female<br>
<input type="radio" name="gender">Other
Just do one thing,
We need to set the name property for the same types. for eg.
Try below:
<form>
<div id="group1">
<input type="radio" value="val1" name="group1">
<input type="radio" value="val2" name="group1">
</div>
</form>
And also we can do it in angular1,angular 2 or in jquery also.
<div *ngFor="let option of question.options; index as j">
<input type="radio" name="option{{j}}" value="option{{j}}" (click)="checkAnswer(j+1)">{{option}}
</div>
in input field make name same
like
<input type="radio" name="option" value="option1">
<input type="radio" name="option" value="option2" >
<input type="radio" name="option" value="option3" >
<input type="radio" name="option" value="option3" >
To create a group of inputs you can create a custom html element
window.customElements.define('radio-group', RadioGroup);
https://gist.github.com/robdodson/85deb2f821f9beb2ed1ce049f6a6ed47
to keep selected option in each group, you need to add name attribute to inputs in group, if you not add it then all is one group.
I have a form where I request a lot of data for a join table in cakePHP3.5 project. The string consists of combinations of factors A, B, C and D separated by space. For example: BD AC ABCD AD B CD. I found out how to compose this string for the one such field.
First I write a required combination to textbox Result, then use Add button to stitch them together.
How to repeat this for many without writing a long jQuery? Basically I need to repeat what is below 50 times, but I cannot find proper selectors for all these multiple checkboxes. Checkbox 1 down there is for illustrating purposes to emphasize that I will have different checkboxes and many such input fields.
This is my first jQuery, so please, be patient :)
$(document).ready(function() {
$('.factor-checkbox').click(function() {
var text = $('#result0');
text.val('');
$(".factor-checkbox:checked").each(function() {
text.val(text.val() + $(this).val());
});
});
$("#btn0").click(function(){
var text1 = $('#combinations0');
text1.val(text1.val() + ' ' + $('#result0').val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" name="A" value="A" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="B" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="C" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="D" class="factor-checkbox">D</label>
<label for="result0">Result </label><input type="text" id="result0"/>
<button type="button" id="btn0">Add</button>
<div class="input checkbox"><label for="items-0-id"><input type="checkbox" name="items[0][id]" value="1" id="items-0-id">1</label></div>
<div class="input text"><label for="Combinations">Combinations</label><input type="text" id="combinations0"/></div>
I would suggest to:
Wrap each repeating block (each with 4 checkboxes, ...etc) in a separate container element: that will facilitate to address the different elements that belong together.
Don't use id attributes where not necessary: for labels you don't need them when you wrap the input inside the label element. Instead use class names. This will facilitate the generation of all the 50 blocks
In each event handler determine the section the click happened in, and then use that as the scope of every other jQuery selection you do (by using the second argument of $() -- or .find().
Here is working snippet with two such blocks:
$(function() {
function mapValues(elem) {
return $(elem).val();
}
$(".factor-checkbox").click(function() {
var $section = $(this).closest(".section");
var $text = $(".result", $section);
$text.val($.map($(".factor-checkbox:checked", $section), mapValues).join(""));
});
$(".add").click(function() {
var $section = $(this).closest(".section");
var $combi = $(".combinations", $section);
$combi.val(($combi.val() + " " + $(".result", $section).val()).trim());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section">
<label><input type="checkbox" name="A" value="A" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="B" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="C" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="D" class="factor-checkbox">D</label>
<label>Result <input type="text" class="result"></label>
<button type="button" class="add">Add</button>
<div class="input text">
<label>Combinations <input type="text" class="combinations"></label>
</div>
</div>
<div class="section">
<label><input type="checkbox" name="A" value="A" class="factor-checkbox">A</label>
<label><input type="checkbox" name="B" value="B" class="factor-checkbox">B</label>
<label><input type="checkbox" name="C" value="C" class="factor-checkbox">C</label>
<label><input type="checkbox" name="D" value="D" class="factor-checkbox">D</label>
<label>Result <input type="text" class="result"></label>
<button type="button" class="add">Add</button>
<div class="input text">
<label>Combinations <input type="text" class="combinations"></label>
</div>
</div>
I need check-boxes list that has one quality of radio-buttons:
That you can check only one of them.
I don't want to use radio-buttons, becouse I need other qualities of check-boxes, like that you can un-check it by additional click.
Is there any simple way to do it?
I can use javascript, including knockout and jquery libraries.
DEMO
$(function() {
$(':checkbox').on('change',function() {
$(':checkbox[name=' + this.name + ']:checked').not(this).prop('checked',false);
});
});
HTML:
<fieldset>
<legend>Group1</legend>
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
</fieldset>
<fieldset>
<legend>Group2</legend>
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />
</fieldset>
Checkbox Group exactly like a radio button group
jsfiddle:
Checkbox Group
Javascript:
$("input:checkbox").click(function(){
var group = "input:checkbox[name='"+$(this).attr("name")+"']";
$(group).attr("checked",false);
$(this).attr("checked",true);
});
Checkbox Group you can remove all checked.
jsfiddle:
Checkbox Group(can remove all checked)
Javascript:
$("input:checkbox").change(function(){
var group = "input:checkbox[name='"+$(this).attr("name")+"']";
$(group).not(this).prop("checked",false);
$(this).prop("checked",!this.checked);
});
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/
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>