When someone clicks on first input:checkbox, I want my code to check all checkboxes, but my code doesn't work correctly:
EXAMPLE: http://jsfiddle.net/cQYVE/
$('.table_show tr input:first').live('click',function(){
var isChecked = $(this).prop('checked');
$(".table_show tr input[name=checked[]]").each(function(){
if (!$(this).prop('checked') == isChecked) {
$(this).parent().click();
}
});
});
What is the cause of the problem?
the problem with your code is that you dont quote the name selector properly:
change
$(".table_show tr input[name=checked[]]")
to
$(".table_show tr input[name='checked[]']")
see:
http://jsfiddle.net/cQYVE/5/
also, your UX could be better. Usually when the user manually checks all the checkboxes, the checkall checkbox should become checked, and when user unchecks one box so that "all" arent checked, the checkall box should become unchecked
edit:
The answer to the 2nd question is that you must maintain a count of total number of checkboxes, and when that number is checked, the checkall checkbox must be checked, otherwise it must be unchecked. do this check every time user checks a checkbox manually. Sorry, i dont have the time to provide that code right now.
Your problem is here:
$(".table_show tr input[name=checked[]]")
jQuery sees this as looking for the name checked[, because the first ] terminates the name.
You need to escape it with a backslash, which itself needs to be escaped with another backslash.
$(".table_show tr input[name=checked\\[\\]]")
After replacing this, your code works.
Edit: I'll leave this answer here because it works and may be useful for similar problems, but mkoryak's answer is the proper way to deal with this.
Try this one out:
http://jsfiddle.net/cQYVE/8/
$('.table_show tr').live('click',function(e) {
var wasCheckboxClicked = $(e.target).is('input[name=delete[]]'),
row = $(this),
checkBox = row.find("input:checkbox"),
shouldCheck = checkBox.prop('checked') == wasCheckboxClicked;
if (!row.is(':first-child')) {
row.css('backgroundColor', shouldCheck?"#ffd6c1":"");
checkBox.prop('checked', shouldCheck);
}
});
$('.table_show th input[type=checkbox]').live('click',function(){
if($(this).is(':checked')) {
$('.table_show td input[type=checkbox]:not(:checked)').parent().click();
}
else {
$('.table_show td input[type=checkbox]:checked').parent().click();
}
});
$('.table_show td input[type=checkbox]').live('click', function(){
if($(this).is(':checked')) {
var checkboxes = $('.table_show td input[type=checkbox]');
if(checkboxes.length == checkboxes.filter(':checked').length) {
$('.table_show th input[type=checkbox]').attr('checked', 'checked');
}
}
else {
console.log($('.table_show th input[type=checkbox]').attr('checked'));
$('.table_show th input[type=checkbox]').removeAttr('checked');
}
});
Related
I have 2 issues here. Clicking an input on a row should check the row's checkbox. Currently, only the first text input will check the checkbox because of .prev(). Is there a different way to do this? All inputs for that row should check that row's checkbox.
// check checkbox for clicked row
$('table').on('click', 'input[type=text]', function () {
$(this).closest('td').prev().find('input').prop('checked', true);
});
Also, the second block of code isn't working as it should. If you focus on a different row, if the text inputs from the previous (or any) row are blank - remove the checkbox. The checkbox will be a save, and there is no point of saving blank text inputs.
// remove check in inputs are empty for that row
$('input[type=text]').blur(function () {
$('table tr').each(function () {
if ($(this).find('input[type=text]:empty').length()) {
$('td').find('input').prop('checked', false);
}
});
})
http://jsfiddle.net/Ldge5qzn/
Find the closest tr instead and then find the inputs that are checkboxes and set the checked property
$(this).closest('tr').find('input[type=checkbox]').prop('checked', true);
For the second part, the :empty selector tests against the element having child elements not against empty values so that has to also be modified. Loop through each rows text inputs set a flag if any of them are not empty. Set checkbox accordingly
$('table tr').each(function () {
var emptyRow = true;
$(this).find("input[type=text]").each(function(){
if($(this).val().length > 0) {
emptyRow = false;
}
});
if (emptyRow) {
$(this).find('input[type=checkbox]').prop('checked', false);
}
});
JSFiddle Demo
You can do it by checking the closest tr - then finding the checkbox in that tr
$('table').on('click', 'input[type=text]', function () {
$(this).closest('tr').find('input[type=checkbox]').prop('checked', true);
});
Same thing with the second problem - check using the closest tr
Then you can use filter to get all the text inputs with values
Then check the length to see if there are any inputs returned - and set the checked property accordingly using .prop('checked',function()
$('input[type=text]').blur(function () {
var $tr = $(this).closest('tr'); // get closest tr
// get all of input[type=text] with value in that row
var inputsWithValue = $tr.find('input[type=text]').filter(function () {
return $.trim(this.value).length;
});
// set the checked to true if any element has value - else set checked to false
$tr.find('input[type=checkbox]').prop('checked', function () {
return inputsWithValue.length;
}).length;
});
FIDDLE
have a look at this .Hope this helps ...
$('table').on('click', 'input[type=text]', function () {
$(this).closest('td').parent('tr').find('input[type="checkbox"]').prop('checked', true);
});
full code below :-
JSFiddle
I'm struggling with a jQuery selection: I have a table that contains these columns (more or less)
Name (input field)
Surname (input field)
Note (textarea)
Button (a button to submit the relative note)
I would like to hide all buttons whose textarea is empty (to avoid the submission). This is the table:
The DOM structure of the single row is quite simple (I think):
So, I would like to select something like "all buttons contained in a td that is a brother of a td that cointains an empty textarea"...anf anf...can I do that with a single jQuery selection or not? Thank you in advance.
Of course!
$("tr td textarea").each(function() {
if (this.value == "") {
$(this).closest("td").next("td").find("button").prop("disabled", true);
}
});
You could hide buttons onLoad with the next selector:
$('textarea:empty').parent().next('td').find('button').hide();
Or if you want to disable the buttons:
$('textarea:empty').parent().next('td').find('button').prop("disabled", true);
It would be useful to check if user has type something in the textarea while on the page, and enable or not the button:
$( $('textarea') ).blur(function() {
var button = $(this).parent().next('td').find('button');
if($(this).val() === ''){
button.prop("disabled", true);
}else{
button.prop("disabled", false);
}
});
You can check this fiddle with your table included:
http://jsfiddle.net/6B9XA/4/
try this
$('table textarea').change(function()
{
var thisval=$.trim($(this).html())
if(thisval=='')
{
$(this).parent().next().children('button').attr('disabled')
}
})
I think you should use it this way:
$("#yourtableid").find("textarea").each(function() {
if (this.value == "") {
$(this).closest("tr").find("button").prop("disabled", true);
}
});
"#yourtableid" this should be changed to your table id.
Selectors optimization for performance boost.
You can use filter() to get only the buttons who contains an empty textarea within that row
$('tr button').filter(function(){ // get all buttons
return $(this).closest('tr').find('textarea').val() == ''; // only return those that are empty
}).prop('disabled',true); // disable the buttons
I have a table with a checkbox in each row and a button below it. I want to disable the button if at least one checkbox is checked.
<tbody>
<tr>
<td>
<input class="myCheckBox" type="checkbox"></input>
</td>
</tr>
</tbody>
<button type=submit id="confirmButton"> BUTTON </button>
The jQuery I came up with to accomplish this is the following:
$('tbody').click(function () {
$('tbody tr').each(function () {
if ($(this).find('.myCheckBox').prop('checked')) {
doEnableButton = true;
}
if (!doEnableButton) {
$('#confirmButton').prop('disabled', 'disabled')
}
else {
$('#confirmButton').removeAttr("disabled");
}
});
});
Naturally, this does not work. Otherwise I would not be here. What it does do is only respond to the lowest checkbox (e.g., when the lowest button is checked/unchecked the button is enabled/disabled).
I made a JSFIddle here although it does not show the same behaviour as locally.
Does any know how I can accomplish that it responds to all checkboxes and disables the button if they are ALL disabled?
Try this:
var checkBoxes = $('tbody .myCheckBox');
checkBoxes.change(function () {
$('#confirmButton').prop('disabled', checkBoxes.filter(':checked').length < 1);
});
checkBoxes.change(); // or add disabled="true" in the HTML
Demo
Explanation, to what I changed:
Cached the checkbox element list/array to make it a bit faster: var checkBoxes = $('tbody .myCheckBox');
removed the if/else statement and used prop() to change between disable= true/false.
filtered the cached variable/array checkBoxes using filter() so it will only keep the checkboxes that are checked/selected.
inside the second parameter of prop added a condition that will give true when there is more than one checked checkbox, or false if the condition is not met.
Add an event handler that fires when a checkbox is changed, and see if there are any checked boxes, and set the disabled property appropriately :
var boxes = $('.myCheckBox');
boxes.on('change', function() {
$('#confirmButton').prop('disabled', !boxes.filter(':checked').length);
}).trigger('change');
FIDDLE
Try this:
$('tbody').click(function () {
if ($('.myCheckBox:checked').length >= 1) {
$('#confirmButton').prop("disabled", true);
}
else {
$('#confirmButton').prop("disabled", false);
}
});
DEMO
Try this one:
let $cbs = $(".myCheckBox").change(function() {
if ($cbs.is(":checked")){
// disable #confirmButton if at least one checkboxes were checked
$("#confirmButton").prop("disabled", false);
} else {
// disable #confirmButton if all checkboxes were unchecked
$("#confirmButton").prop("disabled", true);
}
});
Here an example of my checkbox list http://jsfiddle.net/YnM2f/
Let's say I check on G then A,B,C,D,E,F also automatic checked. How can i achieve my goals with jQuery?
First you need to get all the checkboxes based on which one is clicked. for this you need to get the parent nodes, siblings that are before it. Here is some code that will help you get there, but you'll need to work on it to make it work for you.
http://jsfiddle.net/urau8/
$("input:checkbox").on("click",function(){
if(this.checked)
$(this).parent().prevAll().each(function(){
$("input:checkbox",this).attr("checked",true);
});
});
This will check all checkboxes above a checkboxe that gets checked and uncheck all checkboxes above a checkbox that gets unchecked, given the checkbox layout that you've provided.
$('input:checkbox').click(function () {
var state = $(this).prop('checked');
var elements;
if (state) {
elements = $(this).parent().prevAll();
} else {
elements = $(this).parent().nextAll();
}
elements.each(function () {
$('input:checkbox', this).prop('checked',state);
});
});
$('input:checkbox').change(function(){
var $allParents = $(this).parent();
$allParents.prevAll().find('input').attr('checked', 'checked');
$allParents.nextAll().find('input').removeAttr('checked');
});
Try this
Well it's already been done five times, but this is what I did: http://jsfiddle.net/YnM2f/27/
$('input').click(function(){
if( $(this).is(':checked') ){
$(this).parent('p').prevAll().children('input').attr('checked',true)
}
})
Try something like this: http://jsfiddle.net/YnM2f/16/
It's a very specific solution (as in it will only work with "G"), but it should give you an idea for how to customize this code to meet your needs.
$('input:checkbox').filter(function(){
return (/ G/).test($(this).parent().text())
}).on('change', function() {
var gBox = $(this);
$('input:checkbox').prop('checked', $(gBox).prop('checked'));
});
I'm writing some code that will allow the following:
1.) If a user checks a checkbox it will change the parent <tr> to have a class of selected (this can also be unchecked and remove the class)
2.) Any checkboxes that are already checked will have the class added on document load
3.) If a user checks the #checkall input then all inputs will become checked and add the class of selected (if checked again then it will unselect all and remove the class)
This is the code I have so far:
$("table input[name=choose]:checked").each(function()
{
$(this).closest("tr").addClass("selected");
});
$("table input[name=choose]").live("change", function()
{
$(this).closest("tr").toggleClass("selected");
});
if ($('#checkall:checked') == true)
{
$('#checkall').live("click", function()
{
$('table input[name=choose]').attr('checked', false);
$('table input[name=choose]').closest("tr").toggleClass("selected");
});
}
else
{
$('#checkall').live("click", function()
{
$('table input[name=choose]').attr('checked', true);
$('table input[name=choose]').closest("tr").toggleClass("selected");
});
}
The first two work fine but number 3 doesn't uncheck the checkboxes... Any ideas why? But the class part works fine??
Thanks
I guess it runs always into the else block (have you debugged this)?
Try writing this for checking if the checkbox is checked:
if ($('#checkall').attr('checked'))
Because if ($('#checkall:checked') == true) is always false..
either use
if ($('#checkall').is(':checked'))
or
if ( $('#checkall:checked').length )
Update after comment
Replace the entire third part (all the if/else) with
$('#checkall').live("change", function()
{
$('table input[name=choose]')
.attr('checked', this.checked)
.closest("tr")
.toggleClass("selected", this.checked);
});
demo at http://jsfiddle.net/gaby/KqwsZ/1/