I have to make mutually exculsive checkboxes. I have come across numerous examples that do it giving example of one checkbox group.
One example is at http://blog.schuager.com/2008/09/mutually-exclusive-checkboxes-with.html.
In my case, I have many checkbox groups on the same page, so I want it to work like this example.
An asp.net codebehind example is here, but I want to do it in client side code.
How can I do this in JavaScript?
i have decided to use the ajax mutually exclusive checkbox extender.
The solutions given so far are basically based on radio buttons.
This link really helped me..http://www.asp.net/ajax/videos/how-do-i-use-the-aspnet-ajax-mutuallyexclusive-checkbox-extender
Using Mutual Checkboxes when there is Radio button is a bad idea but still you can do this as follows
HTML
<div>
Red: <input id="chkRed" name="chkRed" type="checkbox" value="red" class="checkbox">
Blue: <input id="chkBlue" name="chkBlue" type="checkbox" value="blue" class="checkbox">
Green: <input id="chkGreen" name="chkGreen" type="checkbox" value="green" class="checkbox">
</div>
<div>
Mango: <input id="chkRed" name="chkMango" type="checkbox" value="Mango" class="checkbox">
Orange: <input id="chkBlue" name="chkOrange" type="checkbox" value="Orange" class="checkbox">
Banana: <input id="chkGreen" name="chkBanana" type="checkbox" value="Banana" class="checkbox">
</div>
Jquery
$('div .checkbox').click(function () {
checkedState = $(this).attr('checked');
$(this).parent('div').children('.checkbox:checked').each(function () {
$(this).attr('checked', false);
});
$(this).attr('checked', checkedState);
});
And here is fiddle
Like I said in my comment, you should really use <radio> elements for this. Give them the same name and they work almost the same way:
<label><input type="radio" name="option" value="Option 1">Option 1</label>
<label><input type="radio" name="option" value="Option 2">Option 2</label>
The only significant difference is that, once one of them is selected, at least one of them has to be on (ie, you can't uncheck them again).
If you really feel the need to do it with check boxes, remind yourself that users with JavaScript disabled will be able to select all the options if they like. If you still feel the need to do it, then you'll need to give each checkbox group a unique class name. Then, handle the change event of each checkbox element and uncheck all the other elements matching the same class name as the clicked element.
I hope this one will work
HTML
A <input type="checkbox" class="alpha" value="A" /> |
B <input type="checkbox" class="alpha" value="B" /> |
C <input type="checkbox" class="alpha" value="C" />
<br />
1 <input type="checkbox" class="num" value="1" /> |
2 <input type="checkbox" class="num" value="2" /> |
3 <input type="checkbox" class="num" value="3" />
JavaScript
// include jQuery library
var enforeMutualExcludedCheckBox = function(group){
return function() {
var isChecked= $(this).prop("checked");
$(group).prop("checked", false);
$(this).prop("checked", isChecked);
}
};
$(".alpha").click(enforeMutualExcludedCheckBox(".alpha"));
$(".num").click(enforeMutualExcludedCheckBox(".num"));
well, radio button should be the one to be used in mutually excluded options, though I've encountered a scenario where the client preferred to have zero to one selected item, and the javaScript'ed checkbox works well.
Update
Looking at my answer, I realized it's redundant to refer to the css class twice. I updated my code to convert it into a jquery plugin, and created two solutions, depending on ones preference
Get all checkboxes whose check is mutually excluded
$.fn.mutuallyExcludedCheckBoxes = function(){
var $checkboxes = this; // refers to selected checkboxes
$checkboxes.click(function() {
var $this = $(this),
isChecked = $this.prop("checked");
$checkboxes.prop("checked", false);
$this.prop("checked", isChecked);
});
};
// more elegant, just invoke the plugin
$("[name=alpha]").mutuallyExcludedCheckBoxes();
$("[name=num]").mutuallyExcludedCheckBoxes();
HTML
A <input type="checkbox" name="alpha" value="A" /> |
B <input type="checkbox" name="alpha" value="B" /> |
C <input type="checkbox" name="alpha" value="C" />
<br />
1 <input type="checkbox" name="num" value="1" /> |
2 <input type="checkbox" name="num" value="2" /> |
3 <input type="checkbox" name="num" value="3" />
sample code
Group all mutually excluded checkboxes in a containing element
JavaScript
$.fn.mutuallyExcludedCheckBoxes = function(){
var $checkboxes = this.find("input[type=checkbox]");
$checkboxes.click(function() {
var $this = $(this),
isChecked = $this.prop("checked");
$checkboxes.prop("checked", false);
$this.prop("checked", isChecked);
});
};
// select the containing element, then trigger the plugin
// to set all checkboxes in the containing element mutually
// excluded
$(".alpha").mutuallyExcludedCheckBoxes();
$(".num").mutuallyExcludedCheckBoxes();
HTML
<div class="alpha">
A <input type="checkbox" value="A" /> |
B <input type="checkbox" value="B" /> |
C <input type="checkbox" value="C" />
</div>
<div class="num">
1 <input type="checkbox" value="1" /> |
2 <input type="checkbox" value="2" /> |
3 <input type="checkbox" value="3" />
</div>
sample code
Enjoy :-)
Try this:
HTML
<div>
Car: <input id="chkVehicleCar" name="chkVehicle" type="checkbox" value="Car" class="radiocheckbox">
Moto: <input id="chkVehicleMoto" name="chkVehicle" type="checkbox" value="Moto" class="radiocheckbox">
Byke: <input id="chkVehicleByke" name="chkVehicle" type="checkbox" value="Byke" class="radiocheckbox">
Feet: <input id="chkVehicleFeet" name="chkVehicle" type="checkbox" value="Feet">
</div>
<span>
Red: <input id="chkColorRed" name="chkColor" type="checkbox" value="Red" class="radiocheckbox">
Blue: <input id="chkColorBlue" name="chkColor" type="checkbox" value="Blue" class="radiocheckbox">
Green: <input id="chkColorGreen" name="chkColor" type="checkbox" value="Green" class="radiocheckbox">
Mango: <input id="chkFruitMango" name="chkFruit" type="checkbox" value="Mango" class="radiocheckbox">
Orange: <input id="chkFruitOrange" name="chkFruit" type="checkbox" value="Orange" class="radiocheckbox">
Banana: <input id="chkFruitBanana" name="chkFruit" type="checkbox" value="Banana" class="radiocheckbox">
</span>
​JavaScript/jQuery
$(':checkbox.radiocheckbox').click(function() {
this.checked
&& $(this).siblings('input[name="' + this.name + '"]:checked.' + this.className)
.prop('checked', false);
});​
Mutually exclusive checkboxes are grouped by container+name+classname.
You can use different groups in same container and also mix exclusive with non-exclusive checkbox with same name.
JavaScript code is highly optimized. You can see a working example.
No matter where the check box is located on your page, you just need to specify the group and here you go!
<input type='checkbox' data-group='orderState'> pending
<input type='checkbox' data-group='orderState'> solved
<input type='checkbox' data-group='orderState'> timed out
<input type='checkbox' data-group='sex'> male
<input type='checkbox' data-group='sex'> female
<input type='checkbox'> Isolated
<script>
$(document).ready(function () {
$('input[type=checkbox]').click(function () {
var state = $(this)[0].checked,
g = $(this).data('group');
$(this).siblings()
.each(function () {
$(this)[0].checked = g==$(this).data('group')&&state ? false : $(this)[0].checked;
});
});
})</script>
I guess this is what you want.
Consider the HTML below:
<form action="">
My favourite colors are:<br />
<br />
<input type="checkbox" value="red" name="color" /> Red<br />
<input type="checkbox" value="yellow" name="color" /> Yellow<br />
<input type="checkbox" value="blue" name="color" /> Blue<br />
<input type="checkbox" value="orange" name="color1" /> Orange<br />
<input type="checkbox" value="green" name="color1" /> Green<br />
<input type="checkbox" value="purple" name="color1" /> Purple
</form>
Note that there's two names for color groups: red, yellow, blue and orage, green, purple
And this JavaScript noted below will work generically to all checkbox on the page.
jQuery("input[type=checkbox]").unbind("click");
jQuery("input[type=checkbox]").each(function(index, value) {
var checkbox = jQuery(value);
checkbox.bind("click", function () {
var check = checkbox.attr("checked");
jQuery("input[name=" + checkbox.attr('name') + "]").prop("checked", false);
checkbox.attr("checked", check);
});
});
Take a look at this LIVE example
Related
I have a HTML form that has 2 groups of radio buttons. I need the first group to also change the selection on the second group, i.e.
Group 1 has options A & B, Group 2 has options C & D;
when I select A, I need the form to also select C; when I select B, I need the form to also select D.
I need A & C selected by default when the page loads.
A & C will always be paired; B & D will always be paired.
I know this sounds impractical, but the reason is that this form is sending its responses to another provider's form where I can't edit the fields. They have effectively got a duplicate question in their form (same question just slightly different wording), and I don't want my users to have to answer the same question twice, so I would hope to hide the buttons for C & D from view.
The "name" on the each group is different, and the "value" & "id" for each radio button is unique.
Can this be done? JQuery & JS solutions are welcome.
<label for="buyer-select">
<div class="user-select-label">Buyer</div>
</label>
<input type="radio" name="answers[1234][answers]" id="buyer-select" class="buyer-select" value="buyer" checked>
<label for="agent-select">
<div class="user-select-label">Agent</div>
</label>
<input type="radio" name="answers[1234][answers]" id="agent-select" class="agent-select" value="broker">
<label class="label-text" for="buyer">Buyer</label>
<input type="radio" name="agent" id="buyer" value="false">
<label class="label-text" for="agent">Agent</label>
<input type="radio" name="agent" id="agent" value="true">
Simply set the checked property of the corresponding button.
document.getElementById("buyer").checked = true;
document.getElementById("buyer-select").addEventListener("click", function() {
document.getElementById("buyer").checked = true;
});
document.getElementById("agent-select").addEventListener("click", function() {
document.getElementById("agent").checked = true;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="buyer-select">
<div class="user-select-label">Buyer</div>
</label>
<input type="radio" name="answers[1234][answers]" id="buyer-select" class="buyer-select" value="buyer" checked>
<label for="agent-select">
<div class="user-select-label">Agent</div>
</label>
<input type="radio" name="answers[1234][answers]" id="agent-select" class="agent-select" value="broker">
<br>
<label class="label-text" for="buyer">Buyer</label>
<input type="radio" name="agent" id="buyer" value="false">
<label class="label-text" for="agent">Agent</label>
<input type="radio" name="agent" id="agent" value="true">
You can also replace the second set of radio buttons with a single hidden input. Put the values that would have been sent by the radio button into the value of the hidden input.
document.getElementById("buyer-select").addEventListener("click", function() {
document.getElementById("buyer-agent").value = "false";
});
document.getElementById("agent-select").addEventListener("click", function() {
document.getElementById("buyer-agent").value = "true";
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="buyer-select">
<div class="user-select-label">Buyer</div>
</label>
<input type="radio" name="answers[1234][answers]" id="buyer-select" class="buyer-select" value="buyer" checked>
<label for="agent-select">
<div class="user-select-label">Agent</div>
</label>
<input type="radio" name="answers[1234][answers]" id="agent-select" class="agent-select" value="broker">
<input type="hidden" name="agent" id="buyer-agent" value="false">
Is this what you wanted:
If yes, try this code:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
$('input[type=radio][name="pet"]').change(function() {
var $radiobutton = $("input[value='"+$(this).val()+"']");
$radiobutton.prop("checked", true);
});
$('input[type=radio][name="pet2"]').change(function() {
var $radiobutton = $("input[value='"+$(this).val()+"']");
$radiobutton.prop("checked", true);
});
}, false);
</script>
</head>
<h2>Select a Pet</h2>
<div>
<input name="pet" type="radio" value="dog" /><span>Dog</span>
<input name="pet" type="radio" value="cat" /><span>Cat</span>
<input name="pet" type="radio" value="fish" /><span>Fish</span>
</div>
<div>
<input name="pet2" type="radio" value="dog" /><span>Dog</span>
<input name="pet2" type="radio" value="cat" /><span>Cat</span>
<input name="pet2" type="radio" value="fish" /><span>Fish</span>
</div>
I Need to create two forms with radio buttons as following bellow and then, when change checked, I need to change automatically in the second form (jquery or javacript):
<form id="form-a" name="form-a">
<input type="radio" name="name-a" id="id-a" value="Yes" checked="checked" />
<input type="radio" name="name-b" id="id-b" value="No" />
</form>
<form id="form-b" name="form-b">
<input type="radio" name="name-c" id="id-c" value="Yes" checked="checked" />
<input type="radio" name="name-d" id="id-d" value="No" />
</form>
Just change the name attribute values on the radio buttons to group them and then just add an event listener to listen for changes.
Here is an example.
var radioBtns = document.querySelectorAll("input[type=radio]");
function radioChangeHndl(evt) {
radioBtns.forEach(function(radioBtn) {
radioBtn.checked = '';
if(radioBtn.value === this.value) {
radioBtn.checked = 'true'
}
}.bind(this))
}
radioBtns.forEach(function(radioBtn) {
radioBtn.addEventListener('change', radioChangeHndl);
});
<form id="form-a" name="form-a">
<input type="radio" name="name-a" id="id-a" value="Yes" checked="checked" />
<input type="radio" name="name-b" id="id-b" value="No" />
</form>
<form id="form-b" name="form-b">
<input type="radio" name="name-c" id="id-c" value="Yes" checked="checked" />
<input type="radio" name="name-d" id="id-d" value="No" />
</form>
EDIT: Changed the HTML and JS. Know you just have to add the classes to the Radiobuttons. Tsted with Firefox, Chrome and IE 11. Maybe its not working because jquery is not loaded? If you Add jquery in the Javascript-Part, its working.
My solution is working in both ways. Click on form-a and form-b
HTML:
I changed the button names for grouping. JQuery selector is the classname i added.
<body onload="bodyLoad()">
<form id="form-a" name="form-a">
<input type="radio" class="radioA" name="name-a" id="id-a" value="Yes" checked="checked" />
<input type="radio" class="radioB" name="name-b" id="id-b" value="No" />
</form>
<form id="form-b" name="form-b">
<input type="radio" class="radioA" name="name-c" id="id-c" value="Yes" checked="checked" />
<input type="radio" class="radioB" name="name-d" id="id-d" value="No" />
</form>
JS:
I decided to use click event.
function bodyLoad () {
$("input:radio").click(function() {
var myClass = $(this).attr("class");
$("input:radio").prop('checked',false);
$("." + myClass).prop('checked',true);
});}
I have 2 groups of radio buttons. When a button in on group is clicked any button in the other group should be unchecked, and vice versa.
I tried below which works only once.
The smartest way I thought would be click(). But I can't get my head around it. Any suggestions?
function uncheckRadioBtnSet(){
if ($('[name="a"]').is(':checked')){
$('input[name="b"]').removeAttr('checked');
$(this).off('click');
}else{
$('input[name="a"]').removeAttr('checked');
$(this).off('click');
}
}
$("input[name='a']").click(function(){
uncheckRadioBtnSet();
});
$("input[name='b']").click(function(){
uncheckRadioBtnSet();
});
<input type="radio" name="a" value="1"><br>
<input type="radio" name="a" value="2"><br>
<input type="radio" name="a" value="3"><br>
<h6> separator </h6>
<input type="radio" name="b" value="4"><br>
<input type="radio" name="b" value="5"><br>
<input type="radio" name="b" value="6"><br>
Try this nanocode :)
$("input[name='a'], input[name='b']").click(function(){
$('input[name="'+{b: 'a',a: 'b'}[this.name]+'"]').prop("checked", false);
});
Plunker
Updated code according to new requirements
$("input[name='item_meta[313]'], input[name='item_meta[314]']").click(function(){
$('input[name="'+{'item_meta[313]' : 'item_meta[314]', 'item_meta[314]' : 'item_meta[313]'}[this.name]+'"]').prop("checked", false);
});
However, for the sake of readability, you can also write this code as:
var obj = {
'item_meta[313]' : 'item_meta[314]',
'item_meta[314]' : 'item_meta[313]'
}
$("input[name='item_meta[313]'], input[name='item_meta[314]']").click(function(){
$('input[name="'+obj[this.name]+'"]').prop("checked", false);
});
See this updated Plunker
You can use this:
$("input[name='a']").click(function(){
$('input[name="b"]').prop("checked", false);
});
$("input[name='b']").click(function(){
$('input[name="a"]').prop("checked", false);
});
Demo: https://jsfiddle.net/iRbouh/xn61vs1q/
it will be ok if we use same name for all radio buttons
<input type="radio" name="a" value="1"><br>
<input type="radio" name="a" value="2"><br>
<input type="radio" name="a" value="3"><br>
<h6>
separator
</h6>
<input type="radio" name="a" value="4"><br>
<input type="radio" name="a" value="5"><br>
<input type="radio" name="a" value="6"><br>
I want to collect checked checkboxes (values) with a classname and put them into an array. Just like that one:
var a = new Array();
$('.categoriesCb').each(function(i, item) {
if ($(item).prop('checked'))
{
a.push($(item).val());
}
alert(JSON.stringify(a));
});
my problem is its a bit big. Cant it be done with one-line?11
You can use .map() function along with .get(). You can also eliminate paramete item and use context this:
var a = $('.categoriesCb:checked').map(function(){
return $(this).val();
}).get();
Use jQuery.map()
$('.categoriesCb:checked').map(function() {
return this.value;
}).get();
another way is to use jQuery.makeArray() with .map():
var arr = jQuery.makeArray($(':checked').map(function(){ return this.value; }));
$('pre').html(JSON.stringify(arr));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" checked name="options" value="1" />
<input type="checkbox" name="options" value="2" />
<input type="checkbox" name="options" value="3" />
<input type="checkbox" checked name="options" value="4" />
<input type="checkbox" checked name="options" value="5" />
<br>
<pre></pre>
Just a pure JS single liner. Note that node list to array conversion with the spread operator works fine in Firefox but with Chrome it's only possible with v51 on. Otherwise you will have to go with the good old Array.prototype.map.call(document.querySelectorAll("input[type=checkbox][checked]"), e => e.value) method.
var arr = [...document.querySelectorAll("input[type=checkbox][checked]")].map(e => e.value);
console.log(JSON.stringify(arr));
<input type="checkbox" checked name="options" value="1" />
<input type="checkbox" name="options" value="2" />
<input type="checkbox" name="options" value="3" />
<input type="checkbox" checked name="options" value="4" />
<input type="checkbox" checked name="options" value="5" />
I am trying to hide a set of checkbox when one of these is checked, and make them reappear once it is not checked. The conditions must be based on their value.
var input = document.getElementsByTagName("input");
for(i=0;i<input.length;i++){
input[i].onchange = function(){
if(this.checked){
var value = $(this).val();
$("input[type=checkbox]:not(." + '60' + ")").hide();
$("input[type=checkbox]." + '60').show();
}
}
}
The group of checkbox to hide belong to the values 60 and 90 (two arms accessories can't be selected), the idea is that the two checkboxes cannot be selected, just one, so that's why I need to hide one of them once they're checked, and make them reappear once unchecked.
<input type="checkbox" value="50" /> conductive plastic foot cup $50<br/>
<input type="checkbox" value="60" /> <a>T-arms 2 $60</a><br/>
<input type="checkbox" value="90" /> <a>T-arms 1 $90</a><br/>
<input type="checkbox" value="80" /> metal rails $80<br/>
<input type="checkbox" value="30" /> plastic rails $30<br/>
<input type="checkbox" value="70" /> foot rest ring $70<br/>
<input type="checkbox" value="120" />plastic five star foot $120 <br/>
Here is my fiddle: JS fiddle
I'd suggest the following jQuery:
$('.arms').change(
function(){
$('.arms').not(this).prop('disabled',this.checked);
});
Coupled with the amended HTML:
<input id="check1" type="checkbox" value="50" />
<label for="check1">conductive plastic foot cup $50</label>
<input id="check2" type="checkbox" value="60" class="arms" />
<label for="check2">T-arms 2 $60</label>
<input id="check3" type="checkbox" value="90" class="arms" />
<label for="check3">T-arms 1 $90</label>
<input id="check4" type="checkbox" value="80" />
<label for="check4">metal rails $80</label>
<input id="check5" type="checkbox" value="30" />
<label for="check5">plastic rails $30</label>
<input id="check6" type="checkbox" value="70" />
<label for="check6">foot rest ring $70</label>
<input id="check7" type="checkbox" value="120" />
<label for="check7">plastic five star foot $120</label>
JS Fiddle demo.
The above uses the label element, with a for attribute (or property) to associate the text explicitly with the relevant checkbox.
I've added a class to the inputs that are mutually-exclusive in order to easily target them with a selector, which sets the disabled property of the other element (or elements if you add more mutually-exclusive checkboxes) according to whether the checked, or unchecked, element is checked or unchecked.
Incidentally, it's usually better to disable form-fields, rather than removing/hiding them, that way if a user clicks by accident they're not left wondering where the other option's gone to, or surprised when it suddenly reappears.
If, however, you really want to show/hide the 'other' element(s), then you can use the following:
$('.arms').change(
function(){
$('.arms').not(this).add($(this).next())[this.checked ? 'hide' : 'show']();
});
JS Fiddle demo.
Or you can even use the first approach (using the prop('disabled',this.checked)) with the following CSS (in compliant browsers that implement the :disabled pseudo-selector:
input:disabled,
input:disabled + label {
display: none;
}
JS Fiddle demo.
References:
add().
change().
next().
not().
prop().
I love the use of data attributes for such kind of stuff:
HTML
<input type="checkbox" value="50" /> conductive plastic foot cup $50<br/>
<input type="checkbox" value="60" data-exclude="input[value=90]" /> T-arms 2 $60<br/>
<input type="checkbox" value="90" data-exclude="input[value=60]" /> T-arms 1 $90<br/>
<input type="checkbox" value="80" /> metal rails $80<br/>
<input type="checkbox" value="30" /> plastic rails $30<br/>
<input type="checkbox" value="70" /> foot rest ring $70<br/>
<input type="checkbox" value="120" />plastic five star foot $120 <br/>
JavaScript
var input = document.getElementsByTagName("input");
$('input').each(function() {
var $input = $(this);
$input.change(function() {
var $exclude = $($input.data('exclude'));
$exclude.toggle(! $input.is(':checked'));
});
});
Live demo
http://jsfiddle.net/bikeshedder/2H5kB/10/
btw. I'd rather disable the checkbox than hiding it.