<ul class="sorting" id="filter_by">
<li><input checked="checked" type="checkbox" id="foobar" /><label for="chk1">foobar</label></li>
<li><input checked="checked" type="checkbox" id="foobaz"/><label for="chk2">baz</label></li>
<li><input checked="checked" type="checkbox" id="foofoo"/><label for="chk3">foo</label></li>
</ul>
I want to know how many checkbox are checked. SO I wrote:
$("#filter_by").change(function() {
alert('hi');
var len_checked = $("#filter_by > li > input:checked").length;
});
But Every Time It call for twice. So, alert run two time. Suppose at first all three are checked
Now I unchecked one element. Then alert run twice. I could find the reason?
You should bind the .change handler to the checkboxes, and not the UL:
$("#filter_by :checkbox").change(function() {
alert('hi');
var len_checked = $("#filter_by > li > input:checked").length;
});
You can try it here.
That said, I cannot duplicate what you have reported, at least not on Chrome with the code you posted, so something else could be causing this. Is there any relevant detail you have left out?
Related
I have two checkboxes on a page and I want them to act as only one. For example, I select one, and the other is selected automatically, and vice-versa.
I've managed to select both of them at once, but I can't seem to figure out a way to deselect them at once.
And what's bothering me the most, is that it's probably a super simple line of code that I'm simply not remembering.
Is there a way to do this?
Is this what you're looking for?
$(".test").change(function () {
$(".test").attr("checked", this.checked);
});
<input type='checkbox' class='test'>A<br />
<input type='checkbox' class='test'>B<br />
Here is a solution in pure javascript:
// Select all checkboxes using `.checkbox` class
var checkboxes = document.querySelectorAll('.checkbox');
// Loop through the checkboxes list
checkboxes.forEach(function (checkbox) {
// Then, add `change` event on each checkbox
checkbox.addEventListener('change', function(event) {
// When the change event fire,
// Loop through the checkboxes list and update the value
checkboxes.forEach(function (checkbox) {
checkbox.checked = event.target.checked;
});
});
});
<label><input type="checkbox" class="checkbox"> Item 1</label>
<br>
<label><input type="checkbox" class="checkbox"> Item 2</label>
$(document).ready(function() {
$('#check_one').change(function() {
$('#check_two').prop('checked', $('#check_one').prop('checked'));
});
$('#check_two').change(function() {
$('#check_one').prop('checked', $('#check_two').prop('checked'));
});
});
<form>
<label>Simple checkbox</label>
<input type="checkbox" id="check_one" />
<label>Complicated checkbox</label>
<input type="checkbox" id="check_two" />
</form>
Assuming you have two checkboxes named differently but working in concert, this code would work
html:
<input type="checkbox" id="1" class="handleAsOne">
<input type="checkbox" id="2" class="handleAsOne">
javascript (jquery):
$('.handleAsOne').on('change'){
$('.handleAsOne').prop('checked', false);
$(this).prop('checked', true);
}
if i understood your question correctly you are looking for something like this.
I have multiple checkboxes inside gridview
What i want is, if I select one checkbox and go to select another the first checkbox should get unchecked and second should get checked.
I tried below code
$('.chk').on('change', function () {
alert('click');
$('span.input.chk').not(this).prop('checked', false);
});
My browser rendered HTML for checkbox is below
<span class="chk" title="136"><input id="ContentPlaceHolder1_GrdInvoiceDetailsSearch_ob_GrdInvoiceDetailsSearchBodyContainer_ctl02_0_ctl00_0_ChkID_0" type="checkbox" name="ctl00$ContentPlaceHolder1$GrdInvoiceDetailsSearch$ob_GrdInvoiceDetailsSearchBodyContainer$ctl02$ctl02$ctl00$ChkID" /></span>
</div><div class="ob_gCd">136</div></div></td><td class="ob_gCW" style="width:25%;"><div class="ob_gCc1"><div class="ob_gCc2">GANDHI ADHIVITIYA COMBINE</div></div></td><td class="ob_gCW" style="width:25%;"><div class="ob_gCc1"><div class="ob_gCc2R">292700</div></div></td><td class="ob_gCW" style="width:25%;"><div class="ob_gCc1"><div class="ob_gCc2R">180</div></div></td><td class="ob_gCW ob_gC_Lc" style="width:21%;"><div class="ob_gCc1"><div class="ob_gCc2R">120</div></div></td></tr><tr class="ob_gRA"><td class="ob_gC ob_gC_Fc" style="width:4%;"><div class="ob_gCc1"><div class="ob_gCc2">
<span class="chk" title="102"><input id="ContentPlaceHolder1_GrdInvoiceDetailsSearch_ob_GrdInvoiceDetailsSearchBodyContainer_ctl02_1_ctl00_1_ChkID_1" type="checkbox" name="ctl00$ContentPlaceHolder1$GrdInvoiceDetailsSearch$ob_GrdInvoiceDetailsSearchBodyContainer$ctl03$ctl02$ctl00$ChkID" /></span>
kindly suggest how to achieve this
You will likely need to target the actual checkbox elements beneath your chk class as based on your markup, you are currently targeting the parent <span> elements :
// When one of your checkboxes is checked
$('.chk :checkbox').on('change', function () {
// Uncheck all of them that are not this
$('.chk :checkbox').not(this).prop('checked', false);
});
Use radio buttons, they have this behavior built-in.
http://jsfiddle.net/AGinther/ZF7bD/1/
I am trying to make a list item appear at the bottom of the list when a checkbox is clicked using jQuery, currently I have;
HTML
<ul>
<li><input type="checkbox" id="checkbox-1"><label for="checkbox-1"> Checkbox 1</label></li>
<li><input type="checkbox" id="checkbox-2"><label for="checkbox-2"> Checkbox 2</label></li>
<li><input type="checkbox" id="checkbox-3"><label for="checkbox-3"> Checkbox 3</label></li>
<li><input type="checkbox" id="checkbox-4"><label for="checkbox-4"> Checkbox 4</label></li>
</ul>
Javascript
if ($('input[type="checkbox"]').prop('checked')) {
//Some code goes here...
}
Firstly, you need to include jQuery as a library in your fiddle. Furthermore, your if statement doesn't bind to any events.
You can do this by binding to the click event for checkboxes.
$('input[type="checkbox"]').click(function() {
var $t = $(this);
if ($t.is(':checked')) {
var cb = $t.parent().remove();
$('ul').append(cb);
}
});
Demo: http://jsfiddle.net/ZF7bD/7/
I have made a check-box checkall/uncheckall.
HTML
<div> Using Check all function </div>
<div id="selectCheckBox">
<input type="checkbox" class="all" onchange="checkAll('selectCheckBox','all','check','true');" />Select All
<input type="checkbox" class="check" onchange="checkAll('selectCheckBox','all','check','false');" />Check Box 1
<input type="checkbox" class="check" onchange="checkAll('selectCheckBox','all','check','false');" />Check Box 2
<input type="checkbox" class="check" onchange="checkAll('selectCheckBox','all','check','false');" />Check Box 3
<input type="checkbox" class="check" onchange="checkAll('selectCheckBox','all','check','false');" />Check Box 4
</div>
main.js
function checkAll(parentId,allClass,checkboxClass,allChecked){
checkboxAll = $('#'+parentId+' .'+allClass);
otherCheckBox = $('#'+parentId+' .'+checkboxClass);
checkedCheckBox = otherCheckBox.filter($('input[type=checkbox]:checked'));
if(allChecked=='false'){
if(otherCheckBox.size()==checkedCheckBox.size()){
checkboxAll.attr('checked',true);
}else{
checkboxAll.attr('checked',false);
}
}else{
if(checkboxAll.attr('checked')){
otherCheckBox.attr('checked',true);
}else{
otherCheckBox.attr('checked',false);
}
}
}
It works fine. But get bulky when I have whole lot of checkboxes. I want to do same work by using jQuery rather than putting onchange on each checkbox. I tried different sort of things but couldnot work. I tried following one:
$('.check input[type="checkbox"]').change(function(e){
checkAll('selectCheckBox','all','check','true');
});
to do same work as onchange event but didnot work. Where do I went wrong.
I think you just need this: You do not need to pass all the arguments and have the inline onchange event attached to it. You can simplify your code.
$(function () {
$('input[type="checkbox"]').change(function (e) {
if(this.className == 'all')
{
$('.check').prop('checked', this.checked); //Toggle all checkboxes based on `.all` check box check status
}
else
{
$('.all').prop('checked', $('.check:checked').length == $('.check').length); // toggle all check box based on whether all others are checked or not.
}
});
});
Demo
Your selector is wrong:
.check input[type="checkbox"]
Above selects any input of type checkbox that has the ancestor with class .check. It'll match this:
<div class="check">
<input type="checkbox".../>
</div>
it should be:
input.check[type="checkbox"]
You closed the string here $('.check input[type='checkbox']') instead, you should use double quotes $('.check input[type="checkbox"]')
I need to clear all other checkboxes when a user clicks a checkbox. Pretty much the same behavior as a radio button. User clicks checkbox 'A' and checkboxes 'B' and 'C' are both unchecked. I am using jquery but I can't figure out how to accomplish this. Any ideas?
Here are how the checkboxes are set u:
<div class="sales_block_one">
<span class="sales_box_option_set"><input type="checkbox" value="1" id="exopt10i11553501716" name="optset[0][id]" /><label for="exopt10i11553501716">Test + £100.00</label></span>
<span class="sales_box_option_set"><input type="checkbox" value="2" id="exopt11i21553501716" name="optset[1][id]" /><label for="exopt11i21553501716">Test + £ 200.00</label></span>
<span class="sales_box_option_set"><input type="checkbox" value="3" id="exopt12i31553501716" name="optset[2][id]" /><label for="exopt12i31553501716">Test 3 + £400.00</label></span>
</div>
if all the checkboxes are siblings, it's just like this,
$(':checkbox').change(function(){
if (this.checked) {
$(this).siblings(':checkbox').attr('checked',false);
}
});
crazy demo
Well, if you really want to copy the behavior of the radio button, simple as this,
$(':checkbox').change(function(){
this.checked = true;
$(this).siblings(':checkbox').attr('checked',false);
});
crazy demo
siblings is when the elements has one same parent/container.
sample
<div>
<input type="checkbox" /><label>A</label>
<input type="checkbox" /><label>B</label>
<input type="checkbox" /><label>C</label>
<input type="checkbox" /><label>D</label>
</div>
in that, <input>s and <label>s are siblings.
In your case, which it's not siblings, you can do it this way,
$('.sales_block_one :checkbox').change(function() {
var $self = this; // save the current object - checkbox that was clicked.
$self.checked = true; // make the clicked checkbox checked no matter what.
$($self).closest('span') // find the closest parent span...
.siblings('span.sales_box_option_set') // get the siblings of the span
.find(':checkbox').attr('checked',false); // then find the checbox inside each span and then uncheck it.
});
crazy demo
more about traversing
$("#checkboxA").click(function() {
var checkedStatus = this.checked;
$("#checkboxB_And_C_Selector").each(function() {
this.checked = !checkedStatus;
});
});