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});
}
});
Related
So my title may be confusing, but it has the right details. I have a table with clickable rows. When clicking the row, the row highlights. The table also has a checkbox column. Clicking the checkbox should NOT highlight or remove highlight from the row. How can I properly use .not() or :not in the .on('click', 'tr', function(){ ... }) ? http://jsfiddle.net/vmu0p2oe/
$('table').on('click', 'tr', function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
//$(this).find(":checkbox").prop("checked", false);
}
else {
$('tr.selected').removeClass('selected');
$(this).addClass('selected');
//$(this).find(":checkbox").prop("checked", true);
}
});
Add this to the beginning of the handler:
if($(e.target).is('input[type=checkbox]')) {
return;
}
This will stop the handler from running if the element clicked is a checkbox.
Fiddle: http://jsfiddle.net/vmu0p2oe/1/
Add a handler for the checkbox that uses stopPropagation() to prevent the click from bubbling out to the tr:
$('table').on('click', ':checkbox', function(e) {
e.stopPropagation();
});
DEMO
How about this:
$('table').on('click', 'tr', function (e) {
var el = e.target;
if ( el.type !== "checkbox"){
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
//$(this).find(":checkbox").prop("checked", false);
} else {
$('tr.selected').removeClass('selected');
$(this).addClass('selected');
//$(this).find(":checkbox").prop("checked", true);
}
}
});
fiddle
Please take a look at this fiddle
Would anyone please tell me how to enable a hover event for the table cells on clicking the button #edit_mode and disable it on another click?
<button id='enable_mode'>Enable</button>
<table>
<tbody>
<tr><td>Package</td><td>1</td></tr>
<tr><td>Cost</td><td>900</td></tr>
</tbody>
</table>
jQuery:
$('#enable_mode').click(function(){
$(this).text(function(i, text){
return text === "Enable" ? "Enable" : "Disable";
})
var see = $(this).text()
if($(this).text() == "Enable"){
hoverme($('table tbody tr td:nth-child(2)'));
}else{
????
}
});
function hoverme(para) {
$(para).hover(
function() {
$(this ).append('<div id="edit">Edit</div>' );
}, function() {
$( this ).find('#edit').remove();
}
);
}
This might be what you want to achieve: JSFiddle
And here's the corresponding code. HTML and CSS code stays the same, I've just added a few more rows for clarity, and some padding and margin.
JS:
$('#enable_mode').click(function () {
//Check the text of the button
$(this).text(function (i, text) {
if (text === "Enable") {
//Enable hover state with events on mouseenter and mouseleaves
$("tr").hover(function () {
//On mouseenter, change background color (= hover state)
$(this).css("background-color", "#DDD");
}, function () {
//On mouseleave, change background color to default
$(this).css("background-color", "white");
});
} else if (text === "Disable") {
//Remove mouseenter and mouseleave events.
$("tr").unbind('mouseenter mouseleave');
}
//Toggle the text in the button
return text === "Enable" ? "Disable" : "Enable";
});
});
You can modify this code to do practically anything on hover, including appending things (like you wanted to do).
I have modified your code little bit to achieve your what DEMO
Code:
var para = $('table tbody tr td:nth-child(2)');
$('#enable_mode').click(function()
{
var that = $(this);
if($(this).text() == "Enable")
{
para.bind('mouseover', mouseOver).bind('mouseout', mouseOut);
that.text("Disable");
}
else
{
para.unbind('mouseover mouseout');
that.text("Enable");
}
});
function mouseOver() {
$(this).append('<div id="edit">Edit</div>' );
}
function mouseOut() {
para.find('#edit').remove();
}
Basically, I have a table with each cell containing a checkbox. I want to be able to tick the checkbox by clicking anywhere within the cell and change the color of that cell which I have done.
Now the problem is that when I tick the checkbox and then untick it, that cell is not getting that cell color back, as in the when the checkbox is unticked its cell color should be back to white. Can anyone help me? Help would be highly appreciated.
Here is my fiddle http://jsfiddle.net/UcDMW/50/
$(function () {
$('table tr td').on('click', function (e) {
if (e.target.type == "checkbox") {
if ($(this).is(':checked')) {
$(this).attr('checked', false);
$(this).css('background-color', 'white');
} else {
$(this).attr('checked', true);
$(this).css('background-color', '#DFF0D8');
}
return;
} else {
if ($(this).find('input:checkbox').is(':checked')) {
$(this).css('background-color', 'white');
$(this).find('input:checkbox').attr('checked', false);
} else {
$(this).find('input:checkbox').attr('checked', true);
$(this).css('background-color', '#DFF0D8');
}
}
});
});
You can simply accomplish your task by the following snippet,
Try,
$('table tr td:has(:checkbox)').on('click', function (e) {
$(this).toggleClass('className');
if($(e.target).is(':checkbox')){ return; }
var checked = $(this).find(':checkbox')[0].checked;
$(this).find(':checkbox')[0].checked = !checked;
});
Cached version
$('table tr td:has(:checkbox)').on('click', function (e) {
$(this).toggleClass('className');
if($(e.target).is(':checkbox')) return;
var checkBox = $(this).find(':checkbox')[0];
checkBox.checked = !checkBox.checked;
});
DEMO
You could restructure like this
$('table tr td').on('click', function(e){
var checkbox = $(this).find('input:checkbox');
if (!$(e.target).is(':checkbox')) {
checkbox.prop('checked', !checkbox.is(':checked'));
}
$(this).css('background-color', checkbox.is(':checked')?'#DFF0D8':'white');
});
DEMO
You can change your js to this:
working demo
EDIT: now working also when clicking on td cells.
$(function(){
bindCells();
});
function bindCells() {
$('table tr td').on('click', function (e) {
var check = (e.target.type=="checkbox") ? e.target : $(this).find("input:checkbox").get(0);
$(check).attr('checked', !check.getAttribute('checked'));
$(this).css('background-color', (check.checked) ? '#DFF0D8' : "#FFFFFF");
});
}
alert($(this).is(':checked')); Use it and check the value. It returns false when you check or uncheck the box. This because you use isChecked on table elements(table,tr,td)
Change
if ($(this).is(':checked')) {
in line 4 to
if ($(e.target).is(':checked')) {
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()
I have a div that expands once you click on a link; my issue, is I want to change the text while the div expands so that the link says "hide form". Can somebody please help me? I'm still new to jQuery..
The link to the page is here: http://biggz.co
Here's the jQuery I'm currently using:
$(document).ready(function()
{
jQuery('a.contactForm').click(function() {
jQuery('#contactForm').slideToggle('slow', function() {
// Animation complete.
});
});
});
jQuery('#contactForm').slideToggle('slow', function () {
var txt = ($(this).css('display') == 'none') ? 'contact us directly':'Hide Form';
$('.contactForm').text(txt);
});
$(document).ready(function()
{
jQuery('a.contactForm').click(function() {
jQuery('#contactForm').slideToggle('slow');
$(this).text($(this).text() == 'Show' ? 'Hide' : 'Show');
});
});
Make use of text(). Like
jQuery('a.contactForm').text('Hide Form');
So your code can be
jQuery('a.contactForm').click(function() {
var text= $(this).text();
if (text == 'Show Form')
$(this).text('Hide From');
else
$(this).text('Show Form');
jQuery('#contactForm').slideToggle('slow', function() {
// Animation complete.
});
});