jQuery get all non checked checkbox

jQuery get all non checked checkbox - javascript

HTML:
<input type="checkbox" class="checkbox color" name="color[]" value="Gray">
<input type="checkbox" class="checkbox color" name="color[]" value="red">
<input type="checkbox" class="checkbox color" name="color[]" value="black">
<input type="checkbox" class="checkbox color" name="color[]" value="yellow">
jQuery:
$(".color").click(function(){
console.log($(".color:not(:checked)").val());
})
My code is working but it displaying only one element. How can I resolve this error?

You can use following script for this, Updated Fiddle
$(".color").change(function(){
$(".color").each(function(){
if (!$(this).prop("checked")) {
alert($(this).val());
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="checkbox color" name="color[]" value="Gray">
<input type="checkbox" class="checkbox color" name="color[]" value="red">
<input type="checkbox" class="checkbox color" name="color[]" value="black">
<input type="checkbox" class="checkbox color" name="color[]" value="yellow">

#super-user has provided a perfectly acceptable answer but you could streamline this further by using the jQuery map() function to translate the array and then use join() to output the result as a string.
$(".color").click(function(){
$("p").text(jQuery.map($(".color:not(:checked)"), function(val, index) {
return $(val).val();
}).join(","));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="checkbox color" name="color[]" value="Gray">
<input type="checkbox" class="checkbox color" name="color[]" value="red">
<input type="checkbox" class="checkbox color" name="color[]" value="black">
<input type="checkbox" class="checkbox color" name="color[]" value="yellow">
<p></p>

$("input[name='color[]']").each( function () {
if ($(this).is(":checked"))
{
}
else
{
}
});

Related

Show only Checked Options using Jquery

How to show only those options which are checked and hide all those which are not checked?
My code just shows checkbox, and not the label.
$("#checked_show").click(function() {
$("input").hide();
$("label").hide();
$("input:checked").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>
<br /><br />
<input type="checkbox" name="location" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="location" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>
<br /><br />
<button id="checked_show">Show only Checked</button>
How to show only those options which are checked and hide all those which are not checked?
My code just shows checkbox, and not the label.

You can use input:checked combined with :not() to select the inputs that aren't checked.
$("#checked_show").click(function() {
$("input:not(:checked)").each((i, el) => {
$(el).next().hide();
$(el).hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>
<br /><br />
<input type="checkbox" name="location" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="location" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>
<br /><br />
<button id="checked_show">Show only Checked</button>

You should use :checked to select the checked input and negate that with :not(), also to hide the labels you have to loop through all elements and select the next element using .next(), here is a working snippet:
$("#checked_show").click(function () {
if ($("input[type='checkbox']:checked").length) {
$("input[type='checkbox']:not(:checked)").each(function (idx, el) {
$(el).next().hide();
$(el).hide();
});
} else {
console.log('Please select an input!');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>
<br /><br />
<input type="checkbox" name="location" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="location" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>
<br /><br />
<button id="checked_show">Show only Checked</button>

I want to checked my all checkbox from one checkbox

function chk() {
var a = $('#chkAll').prop('checked');
if (a == true)
$('.hobbie').attr('checked', 'checked');
else
$('.hobbie').removeAttr('checked');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Select All <input onclick="chk()" type="checkbox" id="chkAll">
<br>
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">
If I clicked on select all checkbox its selecting all checkbox and if I click again it unchecked all checkbox but after that its not working till I refresh the page.

Use this code:
function chk(obj) {
$('.hobbie').prop('checked', $(obj).prop('checked'));
}
demo
function chk(obj) {
$('.hobbie').prop('checked', $(obj).prop('checked'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Select All <input onclick="chk(this)" type="checkbox" id="chkAll">
<br>
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">

No need to check if condition. Shortest way to do this.
function chk() {
$('#chkAll').on('change', function() {
$('.hobbie:checkbox').prop('checked', $(this).is(":checked"));
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input onclick="chk()" type="checkbox" id="chkAll">
<br>
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">

try simple code:
$("#chkAll").click(function () {
$(".hobbie").attr('checked', this.checked);
//or
$(".hobbie").prop('checked', true);
});

One liner function
function chk(isChecked) {
$('.hobbie').prop('checked', isChecked);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Select All <input onclick="chk(this.checked)" type="checkbox" id="chkAll">
<br>
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">
<input type="checkbox" class="hobbie">

Checkbox check all is not working correctly

I have a form field where I have two fields one containing countries and other containing memberships and both have check boxes. The problem is that with the code I am using to Select All the countries (check/uncheck all the check boxes for countries) also checks or unchecks the memberships field. I want to differentiate between the two so that I only check countries and not the check boxes in the membership field.
Here is the code I am using:
$("#checkCountries").click(function(){
$('input:checkbox').not(this).prop('checked', this.checked);
});
EDIT: HTML PART
<tr>
<th>Target Memberships</th>
<td>
<div class="target-memberships col-sm-8">
<input type="checkbox" value="1" name="memberships[]" checked> Standard<br>
<input type="checkbox" value="2" name="memberships[]" checked> Premium<br>
<input type="checkbox" value="3" name="memberships[]" checked> Elite<br>
</div>
</td>
</tr>
<tr>
<th>Target Countries</th>
<td>
<input type="checkbox" id="checkCountries" checked> Select All<br>
<div class="target-countries col-sm-8">
<input type="checkbox" name="country[]" id="country" value="Afghanistan" checked> Afghanistan<br>
<input type="checkbox" name="country[]" id="country" value="Albania" checked> Albania<br>
<input type="checkbox" name="country[]" id="country" value="Algeria" checked> Algeria<br>
<input type="checkbox" name="country[]" id="country" value="American Samoa" checked> American Samoa<br>
<input type="checkbox" name="country[]" id="country" value="Andorra" checked> Andorra<br>
<input type="checkbox" name="country[]" id="country" value="Angola" checked> Angola<br>
</div>
</td>
</tr>
Here, input:checkbox is making the code to work on all the checkboxes in the page. I think I need to change this to make it work specifically for that particular field (countries) only. Please help.

If your HTML is like this:
<input type="checkbox" id="checkCountries" checked="checked"> Select All<br>
<div class="target-countries col-sm-8">
<input type="checkbox" name="country[]" id="country-1" value="Afghanistan" checked="checked" /> Afghanistan<br>
<input type="checkbox" name="country[]" id="country-2" value="Albania" checked="checked" /> Albania<br>
<input type="checkbox" name="country[]" id="country-3" value="Algeria" checked="checked" /> Algeria<br>
<input type="checkbox" name="country[]" id="country-4" value="American Samoa" checked="checked" /> American Samoa<br>
<input type="checkbox" name="country[]" id="country-5" value="Andorra" checked="checked" /> Andorra<br>
<input type="checkbox" name="country[]" id="country-6" value="Angola" checked="checked" /> Angola<br>
</div>
In HTML, each id must be unique. The name can be the same as you have to define the array: country[], but the id must be unique to each element. Since input has no closing tag, it is best to add that to the end of the tag, <input type="checkbox" /> for example.
You can use this:
$("#checkCountries").click(function(){
$(".target-countries input[type='checkbox']").prop("checked", $(this).prop("checked"));
});
This targets the Class selector target-countries and the input elements within that are of a type checkbox. It will then set the property checked to match the value of the current checkbox.
Working Snippet:
$(function() {
$("#checkCountries").click(function() {
$(".target-countries input[type='checkbox']").prop("checked", $(this).prop("checked"));
});
});
.target-countries {
margin: 3px;
border: 1px solid #CCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkCountries" checked="checked"> Select All<br>
<div class="target-countries col-sm-8">
<input type="checkbox" name="country[]" id="country-1" value="Afghanistan" checked="checked" /> Afghanistan<br>
<input type="checkbox" name="country[]" id="country-2" value="Albania" checked="checked" /> Albania<br>
<input type="checkbox" name="country[]" id="country-3" value="Algeria" checked="checked" /> Algeria<br>
<input type="checkbox" name="country[]" id="country-4" value="American Samoa" checked="checked" /> American Samoa<br>
<input type="checkbox" name="country[]" id="country-5" value="Andorra" checked="checked" /> Andorra<br>
<input type="checkbox" name="country[]" id="country-6" value="Angola" checked="checked" /> Angola<br>
</div>
Hope that helps.

using checkboxes for multiple instances

I have this script. Everything is working except I need to make it work with multi-able items. The first set of work perfectly, but I can seam to replicate it on the second and third set of check boxes.
$(".checkall").on('change', function()
{
// all normal checkboxes will have a class "chk_xxxxxx"
// where "xxxx" is the name of the location, e.g. "chk_wales"
// get the class name from the id of the "check all" box
var checkboxesClass = '.chk_' + $(this).attr("id");
// now get all boxes to check
var boxesToCheck = $(checkboxesClass);
// check all the boxes
boxesToCheck.prop('checked', this.checked);
});
$("#check1 input[type=checkbox], #wales").on("change", function()
{
checkBoxes();
});
function checkBoxes()
{
$("#checked").empty();
if($("#check1 input[type=checkbox]:checked").length == $("#check1 input[type=checkbox]").length)
{
$("#wales").prop("checked", true);
// Display the id of the "check all" box
$("#checked").html($("#checked").html() + "<h3>Wales</h3>");
}
else
{
$("#wales").prop("checked", false);
$("#check1 input[type=checkbox]:checked").each(function()
{
$("#checked").html($("#checked").html() + $(this).next().text() + "<br>");
});
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- <input type="checkbox" id="wales" class="checkall" value="1">
<label for="wales" >Check All</label>
<input type="checkbox" id="checkItem1" value="2" class="chk_wales">
<label for="checkItem1" >Item 1</label>
<input type="checkbox" id="checkItem2" value="2" class="chk_wales">
<label for="checkItem2" >Item 2</label>
<input type="checkbox" id="checkItem3" value="2" class="chk_wales">
<label for="checkItem3" >Item 3</label>-->
<hr />
<input type="checkbox" id="wales" class="checkall" value="1">
<label for="wales">Check All</label>
<section id="check1">
<input type="checkbox" id="checkItem1" value="2" class="chk_wales">
<label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem2" value="2" class="chk_wales">
<label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem3" value="2" class="chk_wales">
<label for="checkItem3">Item 3</label>
</section>
<hr />
<input type="checkbox" id="west" class="checkall" value="3">
<label for="west">Check All</label>
<section id="check2">
<input type="checkbox" id="checkItem4" value="4" class="chk_west">
<label for="checkItem4">Item 1</label>
<input type="checkbox" id="checkItem5" value="4" class="chk_west">
<label for="checkItem5">Item 2</label>
<input type="checkbox" id="checkItem6" value="4" class="chk_west">
<label for="checkItem6">Item 3</label>
</section>
<hr />
<input type="checkbox" id="east" class="checkall" value="5">
<label for="east">Check All</label>
<section id="check3">
<input type="checkbox" id="checkItem7" value="6" class="chk_east">
<label for="checkItem7">Item 1</label>
<input type="checkbox" id="checkItem8" value="6" class="chk_east">
<label for="checkItem8">Item 2</label>
<input type="checkbox" id="checkItem9" value="6" class="chk_east">
<label for="checkItem9">Item 3</label>
</section>
<p>You have selected:</p>
<div id="checked">
</div>
</body>
</html>
Please can anyone help?
Many thanks in advance.

remove checkBoxes() method and replace the last event handlers as (check this fiddle)
//put the event handler directly on the checkboxes inside the section
$( "section input[type='checkbox']" ).on("change", function()
{
console.log( $( this ) );
//get the handle to the parent section
var $parentSection = $( this ).parent();
//compare the number of checked checkboxes with total one
if( $parentSection.find( "input[type='checkbox']:checked" ).length == $parentSection.find( "input[type=checkbox]" ).length )
{
$parentSection.prev().prev().prop("checked", true);
//write checkall's textbox id
$("#checked").append( "<h3>" + $parentSection.prev().prev().attr( "id" ) + "</h3>");
}
else
{
$parentSection.prev().prev().prop("checked", false);
//write each and every checked box's text
$parentSection.find("input[type='checkbox']:checked").each(function()
{
$("#checked").html($("#checked").html() + $(this).next().text() + "<br>");
});
}
});

Following code snippet should fulfill your requirements. Hope this will help you.
var checkedDiv = $("#checked");
$('input[type=checkbox]').on('change', function() {
if (this.className == 'checkall') {
var section = $(this).nextAll('section:first');
section.find('input[type=checkbox]').prop('checked', this.checked);
} else {
var parentSection = $(this).parent();
var checkall = parentSection.prevAll(".checkall:first")
var isEqual = parentSection.find("input[type=checkbox]:checked").length == parentSection.find("input[type=checkbox]").length;
checkall.prop("checked", isEqual);
}
checkedDiv.html('');
$('.checkall').each(function() {
if (this.checked) {
checkedDiv.append('<h3>' + this.id + '</h3><br/>');
} else {
var section = $(this).nextAll('section:first');
section.find("input[type=checkbox]:checked").each(function() {
checkedDiv.append($(this).next().text() + "<br>");
});
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="wales" class="checkall" value="1">
<label for="wales">Check All</label>
<section id="check1">
<input type="checkbox" id="checkItem1" value="2" class="chk_wales">
<label for="checkItem1">Item 1</label>
<input type="checkbox" id="checkItem2" value="2" class="chk_wales">
<label for="checkItem2">Item 2</label>
<input type="checkbox" id="checkItem3" value="2" class="chk_wales">
<label for="checkItem3">Item 3</label>
</section>
<hr />
<input type="checkbox" id="west" class="checkall" value="3">
<label for="west">Check All</label>
<section id="check2">
<input type="checkbox" id="checkItem4" value="4" class="chk_west">
<label for="checkItem4">Item 1</label>
<input type="checkbox" id="checkItem5" value="4" class="chk_west">
<label for="checkItem5">Item 2</label>
<input type="checkbox" id="checkItem6" value="4" class="chk_west">
<label for="checkItem6">Item 3</label>
</section>
<hr />
<input type="checkbox" id="east" class="checkall" value="5">
<label for="east">Check All</label>
<section id="check3">
<input type="checkbox" id="checkItem7" value="6" class="chk_east">
<label for="checkItem7">Item 1</label>
<input type="checkbox" id="checkItem8" value="6" class="chk_east">
<label for="checkItem8">Item 2</label>
<input type="checkbox" id="checkItem9" value="6" class="chk_east">
<label for="checkItem9">Item 3</label>
</section>
<p>You have selected:</p>
<div id="checked"></div>

jQuery (Mobile): get all checked items (checkboxes)

I got trouble finding a solution to this one.
I have an amount of checkboxes, and I want to get how many of them are checked.
Each time a box get checked/unchecked, the value needs to update.
What I have so far:
http://jsfiddle.net/drhmorw5/3/
My code so far:
function selected() {
var i = 0;
$("#names").each(function () {
if ($(this).prop("checked") === true) {
i++;
$("#checked").text("Sum Checked: " + i);
}
})
};
$("#checked").text("Sum Checked: ");

$(function(){
$('#names input[type=checkbox]').change(function(){
$("#checked").text($('#names input[type=checkbox]:checked').length);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<div id="names">
<label>
<input type="checkbox" name="checkbox-0" class="check">Name 1</label>
<label>
<input type="checkbox" name="checkbox-0" class="check">Name 2</label>
<label>
<input type="checkbox" name="checkbox-0" class="check">Name 3</label>
<label>
<input type="checkbox" name="checkbox-0" class="check">Name 4</label>
<label>
<input type="checkbox" name="checkbox-0" class="check">Name 5</label>
<label>
<input type="checkbox" name="checkbox-0" class="check">Name 6</label>
</div>
<br>
<br>
Sum Checked: <span id="checked">0</span>

Develop Reference

JavaScript is the programming language of the Web.

jQuery get all non checked checkbox - javascript

$("input[name='color[]']").each( function () { if ($(this).is(":checked")) { } else { } });

Related

Show only Checked Options using Jquery

I want to checked my all checkbox from one checkbox

Checkbox check all is not working correctly

using checkboxes for multiple instances

jQuery (Mobile): get all checked items (checkboxes)

Categories

Resources