How to toggle icheck checkboxes - javascript

I have 2 checkboxes (Yes / No ) with the plugin icheck (http://icheck.fronteed.com), and I want when Yes is checked No will be unchecked, and vice-versa.
<label class="checkbox-inline i-checks"> <input asp-for="Yes" type="checkbox" id="myicheckboxid1"/> Yes </label>
<label class="checkbox-inline i-checks"> <input asp-for="No" type="checkbox" id="myicheckboxid2"/> No </label>
Javascript
$('.i-checks').iCheck({
checkboxClass: 'icheckbox_square-green',
radioClass: 'iradio_square-green'
});

Add event listeners and listen for the change event. Then in the callback that runs when the event fires, change the property opposing checkbox to the opposite of the event value.
var firstCheckbox = $('#myicheckboxid1');
var secondCheckbox = $('#myicheckboxid2');
firstCheckbox.prop('checked', true); // default
// you could also use iChecked to do this but it's fine to set with `prop`
// firstCheckbox.iCheck('check');
firstCheckbox.on('change', function(event) {
secondCheckbox.prop('checked', !event.target.checked);
});
secondCheckbox.on('change', function(event) {
firstCheckbox.prop('checked', !event.target.checked);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/flat/_all.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/flat/blue.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.min.js"></script>
<label class="checkbox-inline i-checks"> <input asp-for="Yes" type="checkbox" id="myicheckboxid1"/> Yes </label>
<label class="checkbox-inline i-checks"> <input asp-for="No" type="checkbox" id="myicheckboxid2"/> No </label>
But seriously, you should consider a radio buttons :)

Related

At least one checkbox checked using jQuery siblings function

I have this code:
$(document).on('click','.subject_add',function() {
var $ele = $("input[type='checkbox']");
var $btn = $(this);
var $sameCheck = $btn.attr('id') && $ele.is(':checked') == $ele.attr('id').split('_')[2];
alert($sameCheck);
if(!$ele.is(':checked')) {
Swal.fire('Oops','Please select the Add-on','error');
return;
}
if($sameCheck) {
Swal.fire('Oops','Please select the correct Add-on for the button','error');
return;
}
}
I am trying to make sure that every checkbox checked from the button which has the same ID. But possibly something is going wrong where it is not matching the same checkbox with same button.
my html:
<div align="left">
<p>
<input type="checkbox" class="checkboxid" name="subject_add" id="subject_add_3">
Yes</p>
<p>
<input type="checkbox" class="checkboxid" name="subject_add" id="subject_add_4">
Yes</p>
</div>
Is that closer to what you want?
When a click is made on a .subject_add link, there is an error message if the checkbox was not checked.
It uses .siblings() to target the sibling checkboxes. No need for any id here. Just check if the checked count is the same as the checkbox count.
It would be easier to debug if you use a Swall error and a Swall success... With two error messages, sure it is getting confusing. ;)
$(document).on('click', '.subject_add', function() {
let boxCount = $(this).siblings("input[type='checkbox']").length
let checkedCount = $(this).siblings("input[type='checkbox']:checked").length
if (checkedCount) {
Swal.fire('Okay!', 'The checkbox is checked', 'success');
}
else{
Swal.fire('Oops', 'Check the checkbox first.', 'error');
}
})
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.14.0/sweetalert2.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.14.0/sweetalert2.min.js"></script>
<div align="left">
<p>
<input type="checkbox" class="checkboxid" name="subject_add">
<input type="checkbox" class="checkboxid" name="subject_add">
<input type="checkbox" class="checkboxid" name="subject_add">
<input type="checkbox" class="checkboxid" name="subject_add">
<input type="checkbox" class="checkboxid" name="subject_add">
Yes</p>
<p>
<input type="checkbox" class="checkboxid" name="subject_add">
<input type="checkbox" class="checkboxid" name="subject_add">
<input type="checkbox" class="checkboxid" name="subject_add">
Yes</p>
</div>

Javascript - unselect checkboxes, items mutually exclusive

I have a group of check boxes that are all part of one array. What I require is that if the first one is selected (I don't mind), then any of the others are unselected, and vice versa - if one of the bottom three options are selected, then I don't mind needs to be unselected.
The last three options can all be selected at the same time.
This Link is similar to what I am asking to do. Any help would be appreciated
<fieldset class="checkbox">
<legend>Sitter type</legend>
<div id="field_844" class="input-options checkbox-options">
<label for="field_1071_0" class="option-label">
<input type="checkbox" name="field_844[]" id="field_1071_0" value="I don't mind">I don't mind</label>
<label for="field_1072_1" class="option-label">
<input checked="checked" type="checkbox" name="field_844[]" id="field_1072_1" value="Sitter">Sitter</label>
<label for="field_1073_2" class="option-label">
<input type="checkbox" name="field_844[]" id="field_1073_2" value="Nanny">Nanny</label>
<label for="field_1074_3" class="option-label">
<input type="checkbox" name="field_844[]" id="field_1074_3" value="Au Pair">Au Pair</label>
</div>
</fieldset>
The code is exactly the same as the link you provided.
<fieldset class="checkbox">
<legend>Sitter type</legend>
<div id="field_844" class="input-options checkbox-options">
<label for="field_1071_0" class="option-label">
<input type="checkbox" name="field_844[]" id="field_1071_0" value="I don't mind">I don't mind</label>
<label for="field_1072_1" class="option-label">
<input checked="checked" type="checkbox" name="field_844[]" id="field_1072_1" value="Sitter">Sitter</label>
<label for="field_1073_2" class="option-label">
<input type="checkbox" name="field_844[]" id="field_1073_2" value="Nanny">Nanny</label>
<label for="field_1074_3" class="option-label">
<input type="checkbox" name="field_844[]" id="field_1074_3" value="Au Pair">Au Pair</label>
</div>
</fieldset>
And then:
// We cache all the inputs except `#field_1071_0` with `:not` pseudo-class
var $target = $('input:not(#field_1071_0)');
$('#field_1071_0').on('change', function () {
// if 'i don't mind' is selected.
if (this.checked) {
// remove the 'checked' attribute from the rest checkbox inputs.
$target.prop('checked', false);
}
});
$target.on('change', function () {
// if one of the bottom three options are selected
if (this.checked) {
// then I don't mind needs to be unselected
$('#field_1071_0').prop('checked', false);
}
});
Demo: https://jsfiddle.net/426qLkrn/4/
I cannot remember an in-house feature of JavaScript or jQuery that makes it possible to solve your problem. So, you have to solve it by your own.
You can add a data attribute to your checkboxes where you list all the checkboxes (as an id) which cannot be selected at the same time with the current checkbox, e.g.:
<input type="checkbox" name="field_844[]" id="field_1071_0" value="I don't mind" data-exclude="['field_1072_1','field_1072_2','field_1072_3']" />
<input checked="checked" type="checkbox" name="field_844[]" id="field_1072_1" value="Sitter" data-exclude="['field_1071_0']" />
...
Then, you add, for example, an onchange event to each of the checkboxes. This event checks whether the checkbox has changed to checked or to unchecked. If it has changed to checked, you have to uncheck all checkboxes within the list:
document.getElementById("field_1071_0").onchange= function(e) {
if (this.checked) {
this.dataset.exclude.forEach(function (exc) {
document.getElementById(exc).checked = false;
});
}
};
Or, with jQuery:
$("#field_1071_0").change(function (e) {
if ($(this).prop("checked")) {
$(this).data('exclude').forEach(function (exc) {
$("#" + exc).prop("checked", false);
});
}
});
The good thing is: You can apply this function to each checkbox you want, e.g.:
$("input:checkbox").change(function (e) {
if ($(this).prop("checked")) {
$(this).data('exclude').forEach(function (exc) {
$("#" + exc).prop("checked", false);
});
}
});
Now, each checkbox has the desired behaviour. So, this solution is a general way to solve it.
Comment: If you do not have access to the HTML code, i.e., to the input fields to add some information like the data-attribute, you can add those information via jQuery/JavaScript too:
$("#field_1071_0").data("exclude", ['field_1072_1','field_1072_2','field_1072_3']);
$("#field_1072_1").data("exclude", ['field_1071_0']);
...
jquery prop method can be used to pragmatically check or unchecked a check box. is can be use to evaluate if a condition is true or false.
Hope this snippet will be useful
// if first check box is selected , then checkedremaining three
$("#field_1071_0").on('change', function() {
//$(this) is the check box with id field_1071_0
// checking if first checkbox is checked
if ($(this).is(":checked")) {
//opt2 is a common class for rest of the check boxes
// it will uncheck all other checkbox
$(".opt2").prop('checked', false)
}
})
//unchecking first checkbox when any of the rest check box is checked
$(".opt2").on('change', function() {
if ($(this).is(":checked")) {
$("#field_1071_0").prop('checked', false)
}
})
<!--Adding a class `opt2` to the last three checkboxes-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="checkbox">
<legend>Sitter type</legend>
<div id="field_844" class="input-options checkbox-options">
<label for="field_1071_0" class="option-label">
<input type="checkbox" name="field_844[]" id="field_1071_0" value="I don't mind">I don't mind</label>
<label for="field_1072_1" class="option-label">
<input checked="checked" type="checkbox" class="opt2" name="field_844[]" id="field_1072_1" value="Sitter">Sitter</label>
<label for="field_1073_2" class="option-label">
<input type="checkbox" name="field_844[]" class="opt2" id="field_1073_2" value="Nanny">Nanny</label>
<label for="field_1074_3" class="option-label">
<input type="checkbox" name="field_844[]" id="field_1074_3" value="Au Pair" class="opt2">Au Pair</label>
</div>
</fieldset>

Change of checkbox doesn't trigger function

I have 2 checkboxes that one selects the other.
Checkbox1 has a change event. However, when I check checkbox1 via checkbox2, the event on checkbox1 is not being triggered.
See jsfiddle.
$(document).ready(function() {
$("#check1").change(arrangeWindow);
$("#check2").click(function(){
$("#check1").prop("checked", this.checked);
});
});
function arrangeWindow() {
console.log("Missing my baby");
}
<input type="checkbox" id="check1" value="value" />
<label for="chk">Checkbox 1</label>
<input type="checkbox" id="check2" value="value" />
<label for="chk">Checkbox 2 </label>
I can call arrangeWindow from check2 click function, but that's not smart.
How can I trigger the change event upon changing it via jquery?
Programmatically changing the checked property does not raise an event on the element. If you need that behaviour you can use trigger('change') manually:
$(document).ready(function() {
$("#check1").change(arrangeWindow);
$("#check2").change(function(){
$("#check1").prop("checked", this.checked).trigger('change');
});
});
function arrangeWindow() {
console.log("Missing my baby");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="check1" value="value" />
<label for="chk">Checkbox 1</label>
<input type="checkbox" id="check2" value="value" />
<label for="chk">Checkbox 2 </label>
Also note that you should always use the change event when dealing with checkboxes and radios for accessibility reasons, as that event can be fired on the element using the keyboard.

Allow selection of only 1 checkbox

I want allow selection of only 1 checkbox.
I am using the following script:
$(document).ready(function(){
$('#valores input').on('change', function() {
$('#valores input').not(this).prop('checked', false);
});
});
And HTML:
<div id="valores">
<div><input type="checkbox" name="valor" id="50reais" class="css-checkbox"/><label for="50reais" class="css-label radGroup1">R$ 50,00</label></div>
<div><input type="checkbox" name="valor" id="100reais" class="css-checkbox"/><label for="100reais" class="css-label radGroup1">R$ 100,00</label></div>
<div><input type="checkbox" name="valor" id="150reais" class="css-checkbox"/><label for="150reais" class="css-label radGroup1">R$ 150,00</label></div>
<div><input type="checkbox" name="valor" id="200reais" class="css-checkbox"/><label for="200reais" class="css-label radGroup1">R$ 200,00</label></div>
<div><input type="checkbox" name="valor" id="250reais" class="css-checkbox"/><label for="250reais" class="css-label radGroup1">R$ 250,00</label></div>
<div><input type="checkbox" name="valor" id="outroValor" class="css-checkbox"/><label for="outroValor" class="css-label radGroup1">Outro Valor</label></div>
</div>
Only works while the page is loading. After ready stops working.
Solved! There was an unnecessary script that I had left in the code and was causing this problem.
Thanks for all!
Sounds like your page may be updating dynamically after load.
Change it to use a delegated event handler, attached to a non-changing ancestor element:
$(document).ready(function(){
$(document).on('change', '#valores input', function() {
$('#valores input').not(this).prop('checked', false);
});
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/hrahs1gu/
Also view your page DOM (e.g. Chrome F12 DOM inspector) after loading, so see if the elements are what you expect.
HTML code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="app2.js"></script>
</head>
<body>
<div>
<h3>Fruits</h3>
<label>
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />Kiwi</label>
<label>
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />Jackfruit</label>
<label>
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />Mango
</label>
</div>
</body>
</html>
Javascript code
$(document).ready(function(){
$("input:checkbox").on('click', function() {
// in the handler, 'this' refers to the box clicked on
var $box = $(this);
console.log($box);
if ($box.is(":checked")) {
// the name of the box is retrieved using the .attr() method
// as it is assumed and expected to be immutable
var group = "input:checkbox[name='" + $box.attr("name") + "']";
// the checked state of the group/box on the other hand will change
// and the current value is retrieved using .prop() method
$(group).prop("checked", false);
$box.prop("checked", true);
} else {
$box.prop("checked", false);
}
});
});

jQuery get the "event invoking" element

My problem is that when the checkbox below is clicked - the check function is called to check/uncheck all the checkboxes. But they have to change relatively to the invoking checkbox (the one with the "onchange" event).
The checkbox HTML declaration:
<input type="checkbox" onchange="$('input[type=checkbox][rel=users]').check();">
Sample JavaScript Code:
$.fn.check = function() {
$(this).each(function(){
$(this).attr('checked', checked);
});
}
And my question is: How can I get the DOM object corresponding to the "check all" checkbox?
Edit: Pass the this object of the checkAll to the function.
DEMO
<input type="checkbox"
onchange="$('input[type=checkbox][rel=users]').check(this);" />
Note the this is passed as .check(this)
And in the JS:
$(document).ready(function() {
$.fn.check = function(orgEl) {
$(this).each(function() {
$(this).attr('checked', orgEl.checked);
});
}
});
Old Post -
Bind the checkAll checkbox to an handler and call the fxn from inside.. See below,
HTML
<input type="checkbox" id="checkAll" >
JS
$(document).ready (function () {
$('#checkAll').click (function () {
//this inside is checkAll checkbox object.
$('input[type=checkbox][rel=users]').check();
});
});
Since you're binding this to the "checkall" checkbox, you have access to itself inline. So you can pass it to the jQuery .check() function you made and use it there. Look at this:
(please excuse my changes to your selecting, you can obviously use what you had before...but I would suggest using :checkbox instead of input[type=checkbox])
<html>
<head>
<script type="text/javascript" src="jquery-min.js"></script>
<script type="text/javascript">
$.fn.check = function (obj) {
$(this).each(function (){
this.checked = obj.checked;
});
}
</script>
</head>
<body>
<input type="checkbox" id="checkall" onclick="$('.check-item').check(this);" /><br />
<input type="checkbox" class="check-item" /><br />
<input type="checkbox" class="check-item" /><br />
<input type="checkbox" class="check-item" /><br />
<input type="checkbox" class="check-item" /><br />
<input type="checkbox" class="check-item" /><br />
<body>
View on JSFIDDLE.
I'm a fan of using HTML5 data attributes for stuff like this. With the following DOM structure, you can define your target checkboxes with a data-target attribute on the triggering checkbox. The target should be a valid jQuery selector string.
HTML:
<input type="checkbox" id="checkUsers" class="checkAll" data-target="input[type=checkbox][rel=users]">
<label for="checkUsers">Users:</label>
<input type="checkbox" rel="users">
<input type="checkbox" rel="users">
<input type="checkbox" rel="users">
<input type="checkbox" rel="users">
<input type="checkbox" rel="users">
<br><br>
<input type="checkbox" id="checkPlaces" class="checkAll" data-target="input[type=checkbox][rel=places]">
<label for="checkPlaces">Places:</label>
<input type="checkbox" rel="places">
<input type="checkbox" rel="places">
<input type="checkbox" rel="places">
<input type="checkbox" rel="places">
<input type="checkbox" rel="places">
Then you setup the plugin to use the target you defined to trigger the checks/unchecks based on the triggering checkbox's checked attribute.
Plugin:
(function( $ ){
$.fn.check = function() {
// "this" is a jQuery object of the checkbox that was clicked.
var target = this.data("target");
$(target).attr("checked", this[0].checked);
return this; //maintain chainability
};
})( jQuery );
The real benefit of this method is that it allows you to only have to manage one event handler declaration by attaching the event to a class instead of an id.
Event Handler Declaration:
$(function(){
$(".checkAll").click(function(){
$(this).check();
});
});

Categories