Develop Reference

I am trying to create a rating system in html/js and i cant log more than one review [duplicate]

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.

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
}
});

Check-boxes with Radio-buttons quality

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);
});

jQuery single click event for N elements with Id optionN

I have following HTML
<input id="Option1" name="Option1" type="checkbox" value="..." />
<input id="Option2" name="Option2" type="checkbox" value="..." />
<input id="Option3" name="Option3" type="checkbox" value="..." />
..........................
..........................
<input id="OptionN" name="OptionN" type="checkbox" value="..." />
Where N can be any number, from 1 to 500.
I want to write a single click event (jquery/JavaScript), so when a user click on any checkbox this method should be called.

Add MyClass class to checkbox
<input id="Option1" name="Option1" type="checkbox" class="MyClass" value="..." />
<input id="Option2" name="Option2" type="checkbox" class="MyClass" value="..." />
<input id="Option3" name="Option3" type="checkbox" class="MyClass" value="..." />
And use the following code
$(".MyClass").on("click", function(){
// Do stuff
})

If you couldn't set a common name or class to the elements, you could use the jQuery Attribute Starts With Selector.
$('input[type="checkbox"][id^="Option"]').on('click', function(){
// Do stuff
})

Given your markup and if there's a form surrounding your inputs:
$("form").on("click", "input[name^='Option'])", function(e) {
console.log(e);
});

Very popular mistake: id must be unique. If you want to target number (class) of elements you should use class:
<input id="Option1" class="option" name="Option1" type="checkbox" value="..." />
<input id="Option2" class="option" name="Option1" type="checkbox" value="..." />
JS:
$('.option').click(function() { ... });

I did it to a table when I click on a button i can remove it
so for your question I think that first of all put your input checkboxes in a DIV and give it an id
AND you give to each input the same class name
<div id="div_id">
<input id="Option1" name="Option1" type="checkbox" class="input_class" value="..." />
<input id="Option2" name="Option2" type="checkbox" class="input_class" value="..." />
<input id="Option3" name="Option3" type="checkbox" class="input_class" value="..." />
..........................
..........................
<input id="OptionN" name="OptionN" type="checkbox" class="input_class" value="..." />
</div>
So using JQuery you can do smth like that :
$("#div_id").on('click', '.input_class', function() {
alert($(this).attr("id"));
});
Hope this peace of code may help you :D

You can use ID based starts-with selector.
$("[id^='Option']").change(function(){
//your function
})

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>