We Keep Coding

JQuery/JavaScript change in the checkbox

I have a simple div with multiple checkboxes in it. I want to look for any change in the checkbox to make an ajax query.
This code is not able to see the changes in those checkboxes. What is the right way to do it?
$(document).on('change', '#listfilters checkbox', function(e) {
if(this.checked) {
alert("changed");
// checkbox is checked
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="listfilters">
<p>
<input type="checkbox" id="showall" name="showall" value=0>
<label for="showall">Show All</label>
</p>
<p>
<input type="checkbox" id="showfl" name="showfl" value=0>
<label for="showfl">Filtered</label>
</p>
</div>

You need to qualify the checkbox part of the selector. Change it to #listfilters [type=checkbox]
$(document).on('change', '#listfilters [type=checkbox]', function(e) {
if(this.checked) {
alert("changed");
// checkbox is checked
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="listfilters">
<p>
<input type="checkbox" id="showall" name="showall" value=0>
<label for="showall">Show All</label>
</p>
<p>
<input type="checkbox" id="showfl" name="showfl" value=0>
<label for="showfl">Filtered</label>
</p>
</div>

Instead of document, you can select directly your div for a quick/faster selector.
$("#listfilters").on('change', 'input[type=checkbox]', function(e) {
if(this.checked) {
alert($(this).val());
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="listfilters">
<p>
<label for="showall"><input type="checkbox" id="showall" name="showall" value="showall">
Show All</label>
</p>
<p>
<label for="showfl"><input type="checkbox" id="showfl" name="showfl" value="Filtered">
Filtered</label>
</p>
</div>

Check and uncheck all checkboxes with jquery

I am using this script to check and uncheck all checkboxes:
$('#checkall').click(function () {
var checked = $(this).data('checked');
$('.chkall').find(':checkbox').attr('checked', !checked);
$(this).data('checked', !checked);
});
It works great, but as soon as I uncheck several checked checkboxes after "check all" and then hit "uncheck all" and "check all" again, those previously unchecked checkboxes are not checked again. Help would be great! Thank you very much!

This might be the correct way..
Use prop instead of attr and group the checkbox list inside a div, just for organizing purposes. Also use the checked as it is, don't negate it.
$(document).ready(function() {
$('#checkall').click(function() {
var checked = $(this).prop('checked');
$('#checkboxes').find('input:checkbox').prop('checked', checked);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkall" />
<label for="checkall">check / uncheck all</label>
<br/>
<br/>
<div id="checkboxes">
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>

$('#checkall').click(function(){
var d = $(this).data(); // access the data object of the button
$(':checkbox').prop('checked', !d.checked); // set all checkboxes 'checked' property using '.prop()'
d.checked = !d.checked; // set the new 'checked' opposite value to the button's data object
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='checkall' data-checked='false'>check/uncheck all</button>
<input type=checkbox>
<input type=checkbox>
<input type=checkbox>
<input type=checkbox>
<input type=checkbox>
I guessed what your HTML looks like, in terms of the triggering button, but what I don't know is how you initially set the data on it. hope this is the way you have it coded. if not, please tell.

You simply need to get all checkboxes and check them all.
$('#checkall').click(function() {
var _this = this;
$('#checkboxes').find('input[name="checkAll"]').each(function() {
if ($(_this).is(':checked')) {
$(this).prop('checked', true);
} else {
$(this).prop('checked', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkall" />
<label for="checkall">check / uncheck all</label>
<br/>
<br/>
<div id="checkboxes" class=".chkall">
<input type="checkbox" name="checkAll"/>
<input type="checkbox" name="checkAll"/>
<input type="checkbox" name="checkAll" />
<input type="checkbox" name="checkAll" />
<input type="checkbox" name="checkAll" />
<input type="checkbox" name="checkAll" />
<input type="checkbox" name="checkAll" />
</div>

Check box class based click function not working

I am trying to find out which check box is selected in a group of check boxes and read its value.
The following is the checkbox format
<div class="panel-body smoothscroll maxheight300 brand_select">
<div class="block-element">
<label>
<input type="checkbox" name="term" value="0" />
Armani </label>
</div>
<div class="block-element">
<label>
<input type="checkbox" name="term" value="1" />
Gucci </label>
</div>
<div class="block-element">
<label>
<input type="checkbox" name="term" value="2" />
Louis Vuitton </label>
</div>
</div>
I tried giving class names but it didn't work. I gave class names as class="brand_name" and tried to read through jquery click function
$('.brand_name').click(function () {
console.log("click worked")
});
But it didn't work. Can someone suggest me a way to do this.

You are applying the click event handler on div and not on checkboxes
$('.brand_select').on('click', ':checkbox', function() {
alert($(this).is(':checked'));
});
To get list of all checked values:
$('.brand_select').on('click', ':checkbox', function() {
var checkedEl = [];
$('.brand_name :checkbox').each(function () {
if ($(this).is(':checked')) {
checkedEl.push($(this).val());
}
});
console.log('Checked values');
console.log(checkedEl);
});

$('input[type="checkbox"]').on('click',function () {
if(this.checked){
alert($(this).val());
}else{
// .........
}
})

Add the class to input elements and change the name of the fields so that you can use them as array -
<input type="checkbox" name="term[]" value="2" class="brand_name"/>

Here is a possible solution:
$('input[name="term"]').on('change', function(){
alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel-body smoothscroll maxheight300 brand_select">
<div class="block-element">
<label>
<input type="checkbox" name="term" value="0" />
Armani </label>
</div>
<div class="block-element">
<label>
<input type="checkbox" name="term" value="1" />
Gucci </label>
</div>
<div class="block-element">
<label>
<input type="checkbox" name="term" value="2" />
Louis Vuitton </label>
</div>
</div>

How to highlight main label for checkbox input using css or jQuery

Let's assume i have code like below;
<div>
<span>SELECT1</span>
<div>
<input type="checkbox" value="option1" name="option1">
<span>option1</span>
</div>
<div>
<input type="checkbox" value="option2" name="option2">
<span>option2</span>
</div>
<span>SELECT2</span>
<div>
<input type="checkbox" value="option3" name="option3">
<span>option3</span>
</div>
<div>
<input type="checkbox" value="option4" name="option4">
<span>option4</span>
</div>
</div>
Is there a way to highlight related "SELECT1" or "SELECT2" if at least one of involved option has checked ? In my situation , it is ok to do so for labels options1,2 and option3,4 however, how for SELECT1 and SELECT2 using css or jquery/js ?
Thanks in advance,

You can do it quite easily:
$('input[type="checkbox"]').change(function(){
if($('input[type="checkbox"]').is(':checked')){
$('.title').css('color','red');
}
else{
$('.title').css('color','black');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<span class="title">SELECT</span>
<div>
<input type="checkbox" value="option1" name="option1">
<span>option1</span>
</div>
<div>
<input type="checkbox" value="option2" name="option2">
<span>option2</span>
</div>
</div>

jQuery - Uncheck other checkboxes if a specific checkbox is selected by user

I would like to uncheck all the checkboxes that are presently selected if a specific checkbox is selected by the user.
Example:
<div>
<label for="foo">
<input type="checkbox" name="meh" id="foo" checked> foo
</label>
</div>
<div>
<label for="bar">
<input type="checkbox" name="meh" id="bar" checked> bar
</label>
</div>
<div>
<label for="foobar">
<input type="checkbox" name="meh" id="foobar"> foobar
</label>
</div>
<div>
<label for="barfoo">
<input type="checkbox" name="meh" id="barfoo" checked> barfoo
</label>
</div>
<div>
<label for="omgwtfbbq">
<input type="checkbox" name="meh" id="omgwtfbbq"> omgwtfbbq
</label>
</div>
If the user selects "omgwtfbbq" checkbox, I would like all the other boxes that might be checked to be unchecked and have the "omgwtfbbq" be the only one checked.

for the label instead of id I think you need for
<div>
<label for="foo">
<input type="checkbox" name="foo" id="foo" checked /> foo
</label>
</div>
<div>
<label for="bar">
<input type="checkbox" name="bar" id="bar" checked /> bar
</label>
</div>
<div>
<label for="foobar">
<input type="checkbox" name="foobar" id="foobar" /> foobar
</label>
</div>
<div>
<label for="barfoo">
<input type="checkbox" name="barfoo" id="barfoo" checked /> barfoo
</label>
</div>
<div>
<label for="omgwtfbbq">
<input type="checkbox" name="omgwtfbbq" id="omgwtfbbq" /> omgwtfbbq
</label>
</div>
then
var $others = $('input[type="checkbox"][name="meh"]').not('#omgwtfbbq')
$('#omgwtfbbq').change(function () {
if (this.checked) {
$others.prop('checked', false)
}
});
$others.change(function () {
if (this.checked) {
$('#omgwtfbbq').prop('checked', false)
}
})
Demo: Fiddle
Note: I'll add a common class to all the input elements which has to be affected by omgwtfbbq and change var $others = $('#foo, #bar, #foobar, #barfoo') to var $others = $('.myclassoninput')

Live demo (click).
$('#omgwtfbbq').click(function() {
$('input:checkbox').not(this).attr('checked', false);
});
Also note that you're re-using id's. Id's should only be used once in a document.

If you choose not to give each checkbox a sequential IDs so that you can use an array, here's a solution:
Place all your controls in a div, with an ID "checkgroup".
Then the JavaScript function goes:
function checkone(d){
if (!d.checked) return; //if it's unchecked, then do nothing
var group=document.getElementById('checkgroup');
var os=group.getElementsByTagName('input');
for (var i=0;i<os.length;i++){
if (os[i].checked&&os[i]!=d) os[i].checked=false;
}
}
Now you can call this function in each checkbox
<div id="checkgroup">
<input id="abcd" onclick="checkone(this);">
<input id="xyz" onclick="checkone(this);">
...
</div>
Note how you don't even need to bother with the name, because the object passes in itself.