The toggle check box function is only working once and after the first instance it doesnt work. Any help?
Here is the jsfiddle:
http://jsfiddle.net/66gmK/
<script>
$(document).ready(function() {
$(document).on('click','#1',function(){
$("INPUT[type='checkbox']").each(function(){
var Checked = $(this).attr('checked');
$(this).attr('checked', !Checked);
});
});
});
</script>
<body>
<form id="form1" name="form1" method="post" action="">
<p>
<input name="checkbox" type="checkbox" id="1" value="0" />
<label for="1" >Toggle All</label>
</p>
<p>
<input name="checkbox" type="checkbox" id="2" value="0" />
ahmed</p>
<p>
<input name="3" type="checkbox" id="3" value="0" />
<label for="3">omar</label>
</p>
</form>
</body>
Move the Checked variable out of the each because the this context changes in the each, it refers to the checkbox in the loop, not the toggle checkbox. Remove the ! not operator when changing the checked property. Also use prop instead of attr for the checked property.
Demo
$(document).ready(function() {
$(document).on('click','#1',function(){
var Checked = $(this).prop('checked');
$("INPUT[type='checkbox']").each(function(){
$(this).prop('checked', Checked);
});
});
});
your jquery
on each function , you should not change the property of toggle checkbox.
$(document).ready(function() {
$(document).on('click','#1',function(){
$("INPUT[type='checkbox']").not(this).each(function(){
var Checked = $(this).prop('checked');
$(this).prop('checked', !Checked);
});
});
});
Demo
You can also use
$(document).ready(function() {
$('#1').on('click',function(){
var Checked = $(this).prop('checked');
$.each($("input[type='checkbox']"), function(i,e){
$(e).prop('checked', Checked);
});
});
});
Related
I have the three input checkboxes all of them have the same name attribute I want one of them is checked then others uncheck and disabled. I want to the jquery code within the function call on function and on change event like this code below or any another way work correctly.
<div class="topmenuitems">
<input type="checkbox" name="menu-item-topitemtypes" value="itemwithouticon" />
<input type="checkbox" name="menu-item-topitemtypes" value="itemwithicon" />
<input type="checkbox" name="menu-item-topitemtypes" value="itemicon" />
</div>
var itemWithIconCheckbox = $('.topmenitems input');
var topItemTypesFunc = function() {
//Jquery code here
};
topItemTypesFunc();
topItemTypeCheckboxes.on( 'change', topItemTypesFunc);
You can do the function you want via radio buttons. Here, I have implemented a simple logic here. When a checkbox is changed ten uncheck checkbox other then the clicked one. Here is an working example.
$('input[name="menu-item-topitemtypes"]').on( 'change', function(){
if($(this).prop('checked')){
$('input[name="menu-item-topitemtypes"]').not($(this)).prop('checked', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topmenuitems">
<input type="checkbox" name="menu-item-topitemtypes" value="itemwithouticon" />
<input type="checkbox" name="menu-item-topitemtypes" value="itemwithicon" />
<input type="checkbox" name="menu-item-topitemtypes" value="itemicon" />
</div>
This may help full to you
$('input[type="checkbox"]').on('change', function(){
if($(this).is(':checked')){
$(this).siblings().attr('disabled', 'true');
}else{
$(this).siblings().removeAttr('disabled', 'false');
}
})
I have a number of checkboxes that change state(checked ,not checked) using another jQuery statement:
Elements:
<input type="checkbox" id="select_a">select group A</input>
<input type="checkbox" id="select_b">select group B</input>
<input type="checkbox" id="mix">select mix</input>
<div id="group_a">
<input type="checkbox" id="a_1">group A_1</input>
<input type="checkbox" id="a_2">group A_2</input>
</div>
<div id="group_b">
<input type="checkbox" id="b_1">group B_1</input>
<input type="checkbox" id="b_2">group B_2</input>
</div>
JQUERY
jQuery("#select_a").click(function () {
if (this.checked) jQuery("div#group_a input:checkbox").prop("checked", true);
else jQuery("div#group_a input:checkbox").prop("checked", false);
});
jQuery("#select_b").click(function () {
if (this.checked) jQuery("div#group_b input:checkbox").prop("checked", true);
else jQuery("div#group_b input:checkbox").prop("checked", false);
});
jQuery("#mix").click(function () {
if (this.checked) {
jQuery("#a_1").prop("checked", true);
jQuery("#b_1").prop("checked", true);
} else {
jQuery("#a_1").prop("checked", false);
jQuery("#b_1").prop("checked", false);
}
});
I need a way to set a listener to each checkbox in the groups, I used this way which works like this:
jQuery("div input:checkbox").click(function(e){
alert(e.target.id);
});
but this only works if the checkbox was clicked by the mouse, I would like a way to fire an event(set a listener) for each checkbox if it was checked by something other than the mouse.
Demo
You can use change() event handler
jQuery("div input:checkbox").change(function(){
alert(this.id);
});
Try change event, also for the top controls use radio instead of checkbox as any one would be checked:
$(function() {
var grp1 = $('#group_a').find('input[type=checkbox]');
var grp2 = $('#group_b').find('input[type=checkbox]');
$('input[name=grp]').on('change', function(e) {
var id = this.id;
grp1.prop('checked', 'select_a' === id);
grp2.prop('checked', 'select_b' === id);
if ('mix' === id) {
grp1.eq(0).prop('checked', true);
grp2.eq(0).prop('checked', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- use radio with name -->
<input type="radio" name="grp" id="select_a" />select group A
<input type="radio" name="grp" id="select_b" />select group B
<input type="radio" name="grp" id="mix" />select mix
<div id="group_a">
<input type="checkbox" id="a_1" />group A_1
<input type="checkbox" id="a_2" />group A_2
</div>
<div id="group_b">
<input type="checkbox" id="b_1" />group B_1
<input type="checkbox" id="b_2" />group B_2
</div>
I have to control the checked status a list of checkboxes from another checkbox.
HTML:
<input id="readall" name="readall" type="checkbox" value="1">
<div id="permGrid">
<input id="recipe.read" name="recipe.read" type="checkbox" value="1" rel="read">
<input id="group.read" name="group.read" type="checkbox" value="1" rel="read">
<input id="ingredients.read" name="ingredients.read" type="checkbox" value="1" rel="read">
</div>
JS:
$('#readall').click(function()
{
var checkStatus = $(this).is(':checked');
var checkboxList = $('#permGrid input[rel="read"]');
$(checkboxList).attr('rel', 'read').each(function(index)
{
if(checkStatus == true)
{
$(this).attr('checked', 'checked');
console.log($(this).attr('checked'));
}
else
{
$(this).removeAttr('checked').reload();
console.log($(this).attr('checked'));
}
});
});
The above code seems fine but the check/uncheck works only for the first time. But when I click the main checkbox second time, it doesn't change the status of other checkboxes into 'checked'. Is there anything I need to do?
I found something similar here. I compared the code and mine and this code is somewhat similar but mine doesn't work.
Try using prop, and shorten the code alot like this
$('#readall').click(function () {
var checkboxList = $('#permGrid input[rel="read"]')
checkboxList.prop('checked', this.checked);
});
DEMO
You can't use a method .reload like this
$(this).removeAttr('checked').reload();
// returns Uncaught TypeError: Object #<Object> has no method 'reload'
Remove it, and it will work.
JSFiddle
Use a class for all the checkboxes which you need to change on click of some checkbox. Like:
<input id="recipe.read" class="toChange" name="recipe.read" type="checkbox" value="1" rel="read" />
I have added a class="toChange" to all the checkboxes except the first one.
<input id="readall" name="readall" type="checkbox" value="1">
<div id="permGrid">
<input id="recipe.read" class="toChange" name="recipe.read" type="checkbox" value="1" rel="read" />
<input id="group.read" class="toChange" name="group.read" type="checkbox" value="1" rel="read" />
<input id="ingredients.read" class="toChange" name="ingredients.read" type="checkbox" value="1" rel="read" />
</div>
Then use the following script:
$('#readall').click(function(){
var checkStatus = $(this).is(':checked');
if(checkStatus){
$(".toChange").attr('checked', 'checked');
}
else{
$(".toChange").removeAttr('checked')
}
});
Demo
I'm having difficulty in using jquery to toggle between 2 checkboxes..Currently this is what i have.
<div id="chkBoxList" onclick="CheckBoxToggle()">
<font size="2">
<input type="checkbox" class="all" name="empType" id="empType1" value="BWR is a Full Time employee. " checked="checked" disabled="disabled"/>
Full Time
<input type="checkbox" class="all" name="empType" id="empType2" value="BWR is a Part Time employee. " /> Part Time
</font>
</div>
jquery follows thus.
function CheckBoxToggle() {
$('#chkBoxList').click(function () {
var $checkbox = $(this).find(':checkbox');
$checkbox.prop('checked', !$checkbox[0].checked);
$checkbox[1].checked;
$checkbox.trigger('change');
});
}
But this either toggles both to checked or unchecked. Since, initial value for one is checked and disabled, when clicked on second i want other to be checked and disabled while the first will be unchecked and disabled. Any help is appreciated.
<html>
<body>
<form name=f1 id=f1>
<input type=checkbox name=chk1 id=chk1 onclick=javascript:document.f1.chk2.checked=!document.f1.chk1.checked;> Check 1<BR>
<input type=checkbox name=chk2 id=chk2 onclick=javascript:document.f1.chk1.checked=!document.f1.chk2.checked;> Check 2<BR>
</form>
</body>
</html>
You need to use .each() to loop through $checkbox.
$(function(){
$('#chkBoxList').click(function () {
var $checkbox = $(this).find(':checkbox');
$checkbox.each(function(){
$(this).prop('checked', !$checkbox[0].checked);
});
});
});
http://jsfiddle.net/mPstq/1/
$('input.all').click(function(e){
$('input.all').prop('checked', false).prop('disabled',false) ;
$(this).prop('checked', true).prop('disabled', true) ;
}) ;
Why in my js code can just with one click on name:check_all checking all checkboxes?
HTML:
<div id="ss">
<input type="checkbox" name="check_all">
</div>
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
jQuery:
$(document).on('click change','input[name="check_all"]',function() {
var checkboxes = $('.idRow');
if($(this).is(':checked')) {
checkboxes.attr("checked" , true);
} else {
checkboxes.attr ( "checked" , false );
}
});
DEMO: http://jsfiddle.net/KdaZr/
My jQuery version is 1.9.
How can fix it?
Use prop method. When your markup is rendered attributes become properties of the elements, using JavaScript you should modify properties of the element.
$(document).on('change','input[name="check_all"]',function() {
$('.idRow').prop("checked" , this.checked);
});
http://jsfiddle.net/GW64e/
Note that if input[name="check_all"] is not generated dynamically there is no need to delegate the event.
Use .prop, not .attr, to change properties of elements. .attr is for HTML attributes.
http://jsfiddle.net/KdaZr/1/
fix is as follow:-
$(document).on('click change','input[name="check_all"]',function() {
var checkboxes = $('.idRow');
if($(this).is(':checked')) {
checkboxes.each(function(){
this.checked = true;
});
} else {
checkboxes.each(function(){
this.checked = false;
});
}
});
A complete solution select || deselect checkbox jQuery :
$(document).ready(function() {
$("#checkedAll").change(function(){
if(this.checked){
$(".checkSingle").each(function(){
this.checked=true;
})
}else{
$(".checkSingle").each(function(){
this.checked=false;
})
}
});
$(".checkSingle").click(function () {
if ($(this).is(":checked")){
var isAllChecked = 0;
$(".checkSingle").each(function(){
if(!this.checked)
isAllChecked = 1;
})
if(isAllChecked == 0){ $("#checkedAll").prop("checked", true); }
}
else {
$("#checkedAll").prop("checked", false);
}
});
});
Html should be :
Single check box on checked three checkbox will be select and deselect.
<input type="checkbox" name="checkedAll" id="checkedAll"></input>
<input type="checkbox" name="checkAll" class="checkSingle"></input>
<input type="checkbox" name="checkAll" class="checkSingle"></input>
<input type="checkbox" name="checkAll" class="checkSingle"></input>
Hope this helps to someone as it did for me.