Why does my check all button work once and doesn't work at 3rd click.
the check all button only works at firts click. I check the dom and its updating but the view does. What is the cause of the problem?
FIDDLE
jQuery('.sp_country').click(function () {
var checkbox = $(this).find(":checkbox"),
checked = checkbox.is(":checked");
checkbox.prop("checked", !checked);
});
jQuery('.sp_country input:checkbox').on('click', function (e) {
e.stopImmediatePropagation();
var checked = (e.currentTarget.checked) ? false : true;
e.currentTarget.checked = (checked) ? false : checked.toString();
});
jQuery('#bt_checkbox').click(function (e) {
e.stopImmediatePropagation();
if (jQuery(this).val() === 'Uncheck All') {
jQuery('#country input:checkbox').removeAttr('checked');
jQuery(this).val('Check All');
} else {
jQuery('#country input:checkbox').attr('checked', 'checked');
jQuery(this).val('Uncheck All');
}
});
fiddle Demo
Change
jQuery('#country input:checkbox').attr('checked', 'checked');
to
jQuery('#country input:checkbox').prop('checked', true);
Use .prop()
Read .prop() vs .attr()
Related
How to run javascript code if checkbox is checked?
checkbox is defined as
<input type="checkbox" id="Maksja_piiratudes" name="Maksja_piiratudes"
onfocus="if(typeof this.ischanged=='undefined') this.ischanged=false" onblur="summarefresh()" onclick="dataChanged(this)">
I tried
$(function () {
$("#Maksja_piiratudes").on("change", function() {
alert('checkbox is checked');
}); // end on change
}); // end $
But this runs also if checkbox is unchecked.
How to run code only if checkgox is selected ?
Bootstrap 3, jquery, jquery UI are used.
You can use the checked property of an checkbox input.
$(function()
{
$('#Maksja_piiratudes').on('change', function()
{
if (this.checked)
{
alert('checkbox is checked');
}
});
});
Edit:
I prefer the vanilla style more.. so just in case someone needs it:
document.querySelector('#Maksja_piiratudes')
.addEventListener('change', function()
{
if (this.checked)
{
alert('checkbox is checked!');
}
}, false);
Try This
$(function () {
$("#Maksja_piiratudes").on("change", function() {
if ($(this).prop("checked") == true) {
alert('checkbox is checked');
} //end if
}); // end on change
}); // end $
If you want to make it global for all checkboxes use the below:
$(function () {
$("input[type='checkbox']").on("change", function() {
if ($(this).prop("checked") == true) {
alert('checkbox is checked');
} //end if
else {
alert('checkbox is unchecked');
}
}); // end on change
}); // end $
I have a row of checkboxes and I want the following:
- when clicking the parent select/unselect all child checkboxes
- when all checkboxes are checked (including the parent) and you uncheck one of the child checkboxes, the parent should also uncheck.
I have this code:
$(document).ready(function(){
//clicking the parent checkbox should check or uncheck all child checkboxes
$(".parentCheckBox").click(
function() {
$(this).parents('fieldset:eq(0)').find('.childCheckBox').attr('checked', this.checked);
}
);
//clicking the last unchecked or checked checkbox should check or uncheck the parent checkbox
$('.childCheckBox').click(
function() {
if ($(this).parents('fieldset:eq(0)').find('.parentCheckBox').attr('checked') == true && this.checked == false)
$(this).parents('fieldset:eq(0)').find('.parentCheckBox').attr('checked', false);
if (this.checked == true) {
var flag = true;
$(this).parents('fieldset:eq(0)').find('.childCheckBox').each(
function() {
if (this.checked == false)
flag = false;
}
);
$(this).parents('fieldset:eq(0)').find('.parentCheckBox').attr('checked', flag);
}
}
);
});
And here it is in a fiddle: http://jsfiddle.net/2b2hw58d/1/
Why doesn't it work?
You need to use .prop() instead of .attr() also, use .closest() to find the closest ancestor element matching the selector.
jQuery(function ($) {
//clicking the parent checkbox should check or uncheck all child checkboxes
$(".parentCheckBox").click(function () {
$(this).closest('fieldset').find('.childCheckBox').prop('checked', this.checked);
});
//clicking the last unchecked or checked checkbox should check or uncheck the parent checkbox
$('.childCheckBox').click(function () {
var $fs = $(this).closest('fieldset');
$fs.find('.parentCheckBox').prop('checked', !$fs.find('.childCheckBox').is(':not(:checked)'))
});
});
Demo: Fiddle
In this parents('fieldset:eq(0)') part :eq(0) isn't needed and use prop instead attr.
JSFiddle
$(document).ready(function(){
//clicking the parent checkbox should check or uncheck all child checkboxes
$(".parentCheckBox").click(
function() {
$(this).closest('fieldset').find('.childCheckBox').prop('checked', this.checked);
}
);
//clicking the last unchecked or checked checkbox should check or uncheck the parent checkbox
$('.childCheckBox').click(
function() {
if ($(this).closest('fieldset').find('.parentCheckBox').prop('checked') == true && this.checked == false)
$(this).closest('fieldset').find('.parentCheckBox').prop('checked', false);
if (this.checked == true) {
var flag = true;
$(this).closest('fieldset').find('.childCheckBox').each(
function() {
if (this.checked == false)
flag = false;
}
);
$(this).closest('fieldset').find('.parentCheckBox').prop('checked', flag);
}
}
);
});
Use 'prop' instead of 'attr'.
Demo:
http://jsfiddle.net/m3o7u7Lm/1/
I am trying to use the same button to trigger an ajax call to add a database entry if it is clicked and then trigger a different ajax call to remove the entry it is clicked again.
I have tried using toggleClass and although the button class does change and it's appearance changes accordingly the function still thinks it has the old class name.
$(document).ready(function() {
$(".selected").on("click", function() {
$(this).text(function (i, oldText) {
return $.trim(oldText) == 'Use Image' ? 'Selected' : 'Use Image';
});
$(this).toggleClass('selected selected_btn');
});
$(".selected").on("click", function() {
alert('selected');
});
$(".selected_btn").on("click", function() {
alert('de selected');
});
});
With the present code the alert is always 'selected'.
$(document).ready(function() {
$(".selected_btn").on("click", function() {
$(this).text(function (i, oldText) {
return $.trim(oldText) == 'Use Image' ? 'Selected' : 'Use Image';
});
$(this).toggleClass('selected');
if($(this).hasClass("selected"))
alert("Selected")
else
alert("de-Selected")
});
});
here is a fiddle:
http://fiddle.jshell.net/prollygeek/3LLN2/
Here is a simple and readable example on how to do this:
$(document).ready(function() {
$('.select-img').on('click', function(){
var $el = $(this);
var isSelected = $el.attr('data-selected');
if( isSelected != 'true' ){
firstFn();
$el.html('Use Image').attr('data-selected', true)
}else{
secondFn();
$el.html('Select').attr('data-selected', false)
}
})
var firstFn = function(){
alert('first thing to do');
}
var secondFn = function(){
alert('second thing to do');
}
})
Demo
Use *Class functions:
hasClass
removeClass
addClass
Working code:
$("a").on("click", function() {
if($(this).hasClass("bob")) {
// do delete
alert("delete");
$(this).removeClass("bob");
} else {
// do insert
alert("insert");
$(this).addClass("bob");
}
});
Demo
$(".selected").on("click", function() {
alert('selected');
});
Overrides the event you put on the beginning of the document.ready, I think.
(might not be true, but I think it is)
I am having trouble with my code, I was able to implement it using code behind but it was not good as I have sliding panel (using jQuery) which were interfered with on post back.
The CheckBoxList is disabled by default with no auto postback.
I want the CheckBoxList to become enables if the CheckBox is checked.
Currently, I have this code:
$("#BizAppsCheckBox").click(function () {
if (this.checked)
$('#BizAppsCheckBoxList').removeAttr('disabled');
else
$('#BizAppsCheckBoxList').attr('disabled', 'disabled');
});
How can I fix this issue?
Best working solution for me, thanks to the answers:
$(document).ready(function () {
if ($("#BizAppsCheckBox").prop('checked') == false) {
$('#BizAppsCheckBoxList *').prop('disabled', true);
}
else {
$('#BizAppsCheckBoxList *').prop('disabled', false);
}
$("#BizAppsCheckBox").click(function () {
if (this.checked)
$('#BizAppsCheckBoxList *').prop('disabled', false);
else
$('#BizAppsCheckBoxList *').prop('disabled', true) &
$('#BizAppsCheckBoxList *').prop('checked', false);
});
});
Try this :
You should use the ClientID cuz asp.net does provide different ID ( when under container)
$("#<%=BizAppsCheckBox.ClientID%> ").click(function () {
if (this.checked)
$('#<%=BizAppsCheckBoxList.ClientID%>').prop('disabled',false);
else
$('#<%=BizAppsCheckBoxList.ClientID%>').prop('disabled', true);
});
edit
$("#<%=BizAppsCheckBox.ClientID%>").click(function () {
if (this.checked)
$('#<%=BizAppsCheckBoxList.ClientID%> *').prop('disabled', false);
else
$('#<%=BizAppsCheckBoxList.ClientID%> *').prop('disabled', true);
});
Use prop instead of attr, if ClientIDMode is not static then use ClientID of server controls
$("#<%= BizAppsCheckBox.ClientID %>").click(function () {
if (this.checked)
$('#<%= BizAppsCheckBoxList.ClientID %>').prop('disabled', true);
else
$('#<%= BizAppsCheckBoxList.ClientID %>').prop('disabled', false);
});
this will do the trick
$("#<%=BizAppsCheckBox.ClientID%>").click(function () {
$('#<%=BizAppsCheckBoxList.ClientID%>').prop('disabled',!this.checked);
});
or
$("#BizAppsCheckBox").click(function () {
$('#BizAppsCheckBoxList').prop('disabled', !this.checked);
});
try using .on()
$("document").on("click","#<%=BizAppsCheckBox.ClientID%>",function(){
$('#<%=BizAppsCheckBoxList.ClientID%>').prop('disabled',!this.checked);
});
I have written 2 jquery functions. Lines 1-11 is the first one which binds mouseover event on mousedown to get the effect of click and drag to select td's(internally checking/unchecking checkboxes).
Second function(12-20) is to click and unclick on single td to check and uncheck a checkbox. I am able to do mousedown and select multiple td's but I am not able to a click and unclick on single td. I am not sure where the problem is ? Any suggestion is appreciated.
Here is the code:
$("#tbl td").mousedown(function() {
$("#tbl td").bind('mouseover', function() {
var checkbox = $(':checkbox', this)[0];
$(this).css({
'background': (checkbox.checked ? 'white' : '#6D7B8D')
});
checkbox.checked = !checkbox.checked;
});
$(this).mouseover();
}).mouseup(function(event) {
$("#td").unbind('mouseover');
event.preventDefault();
event.stopPropagation();
});
$('#tbl td').click(function(e) {
if ($(this).find('input:checkbox').is(':checked')) {
$(this).find('input:checkbox').attr("checked", "");
$(this).css({
background: "white"
});
} else {
$(this).find('input:checkbox').attr("checked", "checked");
$(this).css({
background: "#6D7B8D"
});
}
});
Thanks
Well, I am not sure if this is what you exactly need but maybe could help.
(Just to know, it will be really helpful if you put the HTML code!)
Live Demo: http://jsfiddle.net/oscarj24/TATg7/
Code:
$('#tbl').on('mousedown, mouseover, mouseup, click', 'td', function(e) {
if(e.type == 'mousedown'){
$(this).mouseover();
} else if(e.type == 'mouseover'){
var checkbox = $('input:checkbox');
$(this).css({'background': (checkbox.is(':checked') ? 'white' : '#6D7B8D')});
checkbox.prop('checked', !checkbox.checked);
} else if(e.type == 'mouseup'){
$(this).unbind('mouseover');
e.preventDefault();
e.stopPropagation();
} else if(e.type == 'click'){
var checked = $('input:checked').is(':checked');
checked ? background = 'white' : background = '#6D7B8D';
$('input:checked').prop('checked', !checked);
$(this).css({background: background});
}
});