This code should prohibit clicking more than two radiobuttons in total (there are three groups of such buttons).
This works when there is no container 'label', but when it is, it doesn't work (it looks like that 'if' construct is not working; everything that is written outside of it works fine)
how to make it work without removing the label? Is there any solutions?
var radio_limit = 2;
$('.pricing-levels-3 label input').on('change', function(evt) {
if($(this).siblings(':checked').length >= radio_limit) {
this.checked = false;
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pricing-levels-3">
<p><strong>Select 2 Levels</strong></p>
<label>
<input type="radio" name="vehicle" value="1">Level 1<br>
<input type="radio" name="vehicle" value="2">Level 2<br>
<input type="radio" name="vehicle" value="3">Level 3<br>
</label>
<label>
<br>
<input type="radio" name="vehicle2" value="1">Level 1<br>
<input type="radio" name="vehicle2" value="2">Level 2<br>
<input type="radio" name="vehicle2" value="3">Level 3<br>
</label>
<label>
<br>
<input type="radio" name="vehicle3" value="1">Level 1<br>
<input type="radio" name="vehicle3" value="2">Level 2<br>
<input type="radio" name="vehicle3" value="3">Level 3<br>
<br>
</label>
</div>
You are looking for siblings, which they were without labels. Now with labels they are not sibling they are cousins. To fix we read all radio buttons in same div using closest(). Also use prop to check a radio button. Do this:
var radio_limit = 2;
$('.pricing-levels-3 label input').on('change', function(evt) {
if($(this).closest('div').find('input:checked').length >= radio_limit) {
$(this).prop('checked', false);
};
});
Related
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>
I know how to enable next fieldset in a sequence when fieldsets have id attributes:
function enableFieldset(element) {
document.getElementById(element).disabled = false;
}
<fieldset id="foo" onchange="enableFieldset('bar', event)">
<label><input type="radio" name="foo">Apples</label>
<label><input type="radio" name="foo">Oranges</label>
</fieldset>
<fieldset id="bar" disabled>
<label><input type="radio" name="bar">Bus</label>
<label><input type="radio" name="bar">Airplane</label>
</fieldset>
…
I would like to enable the next sibling fieldset in a multi-step form, that has no set id (by using .nextElementSibling or similar), after input is checked in the current fieldset. I would also like to separate JavaScript from HTML code (with addEventListener).
You can attach the change event listener to all the fieldsets by selecting them using document.querySelectorAll. This will separate the JS code from HTML.
In the event handler, you can get the next sibling, which is disabled, and enable it. Use nextElementSibling for that.
document.querySelectorAll('fieldset').forEach(fs => {
fs.addEventListener('change', function() {
var next = this.nextElementSibling;
while (next && !next.disabled) {
next = next.nextElementSibling;
}
if (next) {
next.disabled = false;
}
});
})
<fieldset id="foo">
<label><input type="radio" name="foo">Apples</label>
<label><input type="radio" name="foo">Oranges</label>
</fieldset>
<fieldset id="bar" disabled>
<label><input type="radio" name="bar">Bus</label>
<label><input type="radio" name="bar">Airplane</label>
</fieldset>
<fieldset id="bar" disabled>
<label><input type="radio" name="x">Bus1</label>
<label><input type="radio" name="x">Airplane1</label>
</fieldset>
<fieldset id="bar" disabled>
<label><input type="radio" name="y">Bus2</label>
<label><input type="radio" name="y">Airplane2</label>
</fieldset>
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 have multiple forms in one page with the same input names. The only difference between forms is the forms that contain them.
For the groups of checkboxes on my form, I only want to allow two checkboxes out of three to be checked but I don't want the checkboxes in one form to affect another.
I have a jsFiddle of what I have now.
I have it setup now that only two checkboxes can be checked out of three but that's for the entire document, not form specific.
The forms in my page are created with a loop and the id of the form is the only difference between them.
Anyone able to help with this?
https://jsfiddle.net/likwidmonster/3zbs61q5/
$('input[type=checkbox][name=group]').on('change', function(e) {
if ($('input[type=checkbox][name=group]:checked').length < 2) {
$('input[type=checkbox][name=group]:not(:checked)').prop('disabled', false);
}
if ($('input[type=checkbox][name=group]:checked').length == 2) {
$('input[type=checkbox][name=group]:not(:checked)').prop('disabled', 'disabled');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<h4>
Form 1
</h4>
<form id="form_1">
<input type="checkbox" name="group" value="1">
<input type="checkbox" name="group" value="2">
<input type="checkbox" name="group" value="3">
</form>
</div>
<div>
<h4>
Form 2
</h4>
<form id="form_2">
<input type="checkbox" name="group" value="1">
<input type="checkbox" name="group" value="2">
<input type="checkbox" name="group" value="3">
</form>
</div>
Since your forms are dynamic maybe this will be of better use.
I did create a jsfiddle and post it in the comment but that's only good for those two forms. Maybe you want to add more? JSFiddle Demo
this.parentNode.id;
this is used to target the element triggering the function, .parentNode is used to get the form element and .id is used to get the ID of the form so you can target that specific form meaning you only need one if condition to run this for all the forms!
$('form input[type=checkbox][name=group]').on('change', function(e) {
var MyForm=this.parentNode.id;
if ($('form[id='+MyForm+'] input[type=checkbox][name=group]:checked').length == 2) {
$('form[id='+MyForm+'] input[type=checkbox][name=group]:not(:checked)').prop('disabled', 'disabled');
}else{
$('form[id='+MyForm+'] input[type=checkbox][name=group]:not(:checked)').prop('disabled', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<h4>
Form 1
</h4>
<form id="form_1">
<input type="checkbox" name="group" value="1">
<input type="checkbox" name="group" value="2">
<input type="checkbox" name="group" value="3">
</form>
</div>
<div>
<h4>
Form 2
</h4>
<form id="form_2">
<input type="checkbox" name="group" value="1">
<input type="checkbox" name="group" value="2">
<input type="checkbox" name="group" value="3">
</form>
</div>
If you have any questions please leave a comment below and I will get back to you as soon as possible.
I hope this help. Happy coding!
Here's a working solution. Hope it helps!
$('input[type=checkbox][name=group]').on('change', function(e) {
if ($('#form_1 input[type=checkbox][name=group]:checked').length === 2) {
$('#form_1 input[type=checkbox][name=group]:not(:checked)').prop('disabled', 'disabled');
}else{
$('#form_1 input[type=checkbox][name=group]:not(:checked)').prop('disabled', false);
}
if ($('#form_2 input[type=checkbox][name=group]:checked').length === 2) {
$('#form_2 input[type=checkbox][name=group]:not(:checked)').prop('disabled', 'disabled');
}else{
$('#form_2 input[type=checkbox][name=group]:not(:checked)').prop('disabled', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div>
<h4>
Form 1
</h4>
<form id="form_1">
<input type="checkbox" name="group" value="1">
<input type="checkbox" name="group" value="2">
<input type="checkbox" name="group" value="3">
</form>
</div>
<div>
<h4>
Form 2
</h4>
<form id="form_2">
<input type="checkbox" name="group" value="1">
<input type="checkbox" name="group" value="2">
<input type="checkbox" name="group" value="3">
</form>
</div>
Use a function to initialize your event handler for each group. Also use a different group name.
https://jsfiddle.net/3zbs61q5/3/
function setupCheckboxGroup(grpName){
$('input[type=checkbox][name='+grpName+']').on('change', function(e) {
if ($('input[type=checkbox][name='+grpName+']:checked').length < 2) {
$('input[type=checkbox][name='+grpName+']:not(:checked)').prop('disabled', false);
}
if ($('input[type=checkbox][name='+grpName+']:checked').length == 2) {
$('input[type=checkbox][name='+grpName+']:not(:checked)').prop('disabled', 'disabled');
}
});
}
setupCheckboxGroup('group');
setupCheckboxGroup('group2');
<div>
<h4>
Form 1
</h4>
<form id="form_1">
<input type="checkbox" name="group" value="1">
<input type="checkbox" name="group" value="2">
<input type="checkbox" name="group" value="3">
</form>
</div>
<div>
<h4>
Form 2
</h4>
<form id="form_2">
<input type="checkbox" name="group2" value="1">
<input type="checkbox" name="group2" value="2">
<input type="checkbox" name="group2" value="3">
</form>
</div>
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>