We Keep Coding

checkbox checked issue in Jquery

I want to set checkbox checked on document load, if check box value="1", and unchecked if value="0".
<input type="checkbox" value="1">
<input type="checkbox" value="0">
<input type="checkbox" value="1">
Jquery: which is wrong, tried many things
$(document).ready ('input[type="checkbox"]', function(event) {
if ($(this).val==1) {
$(this).is(":checked")
}
});
JSFiddle

.ready() accepts a function as the single parameter which is executed after the DOM is ready.
You do not need any condition to check the value manually. You can simply use attribute selector:
$('input[type=checkbox][value=1]').attr('checked', true);
$(document).ready(function() {
$('input[type=checkbox][value=1]').attr('checked', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" value="1">
<input type="checkbox" value="0">
<input type="checkbox" value="1">

There are two errors. First this line ready ('input[type="checkbox"]', function(event) { .ready receives a callback function and your code is wrong there. Secondly in if ($(this).val==1) { val is a method. So that will require braces. You can nly use attribute selector and marked it as checked.Also $(this).is(":checked") return a boolean value but it never checks a checkbox
$(document).ready(function() {
$('input[type="checkbox"][value="1"]').prop('checked', true)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" value="1">
<input type="checkbox" value="0">
<input type="checkbox" value="1">

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>

How to get "unchecked" event from radio input in JavaScript?

I noticed that the "change" event only fires one event when the element is checked. But does not seem to fire any event when unchecked, or do I miss something?
I would like to do something on "uncheck" but that does never trigger.
Ideally, I do not want to save the inputs in an array and on change check which one is checked or not.
Here is an example, as you can see, "do something" never get’s fired:
document.querySelector("input").addEventListener("change", function(ev) {
console.log(ev.target.checked);
if(!ev.target.checked) console.log("do something");
});
<input type="radio" name="type" checked="checked" value="guest" />
<input type="radio" name="type" value="walk_in" />
This seems so basic… maybe I overlooked something?
Thank you!

It only validate at the time of targeted element, not with other Element .Better use for Each function they validated all element change
document.querySelectorAll("input").forEach(function(a) {
a.addEventListener("change", function() {
console.log(this.checked);
console.log("checked radio value="+this.value);
if (!this.checked) console.log("do something");
})
})
<input type="radio" name="type" checked="checked" value="guest" />
<input type="radio" name="type" value="walk_in" />
Or if you need validate check and Uncheck*(like toggle)* use with type=checkbox instead of radio .
Radio button not have toggle checkbox have toggle
document.querySelector("input").addEventListener("change", function(ev) {
console.log(ev.target.checked);
if (!ev.target.checked) console.log("do something");
});
<input type="checkbox" name="type" checked="checked" value="guest" />
<input type="checkbox" name="type" value="walk_in" />

Checkbox to toggle all selection

I have this javascript code
// Listen for click on toggle checkbox
$('#select-all').click(function(event) {
if(this.checked) {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = true;
});
}
});
And I have this
<form action="" method="POST">
Toggle All :
<input type="checkbox" name="select-all" id="select-all" />
then at my table I have multiple checkbox
<input type="checkbox" name="checkbox-1" id="checkbox-1" value="1"> Select
<input type="checkbox" name="checkbox-2" id="checkbox-2" value="2"> Select
<input type="checkbox" name="checkbox-3" id="checkbox-3" value="3"> Select
<input type="checkbox" name="checkbox-4" id="checkbox-4" value="4"> Select
When I click on toggle all, it does not check checkbox-1 to checkbox-4
What went wrong in my javascript code.
Thanks!! I want to actually do a function that will send all the value of checkbox1-4 by post when they are checked on form submit.

Simply do like this.
$('#select-all').click(function(event) {
$(':checkbox').prop("checked", this.checked);
});
You do not need to loop through each checkbox to check all.
Demo
Wrap the code in dom ready if your script is in head tag
$(document).ready(function() {
$('#select-all').click(function(event) {
$(':checkbox').prop("checked", this.checked);
});
});

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