Develop Reference

Show or hide table row if checkbox is checked

I want to hide a table row (with input fields inside) when a checkbox is checked.
I found something that works:
HTML
<table>
<tr id="row">
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox">Hide inputs</td>
</tr>
</table>
Script
$(document).ready(function () {
$('#checkbox').change(function () {
if (!this.checked)
$('#row').fadeIn('slow');
else
$('#row').fadeOut('slow');
});
});
Fiddle
But this only works if the checkbox is not checked already. So if the checkbox is checked at the beginning, I want the table row to be hidden. How do I do this?
Please note that I don't know much about JavaScript, but I really need this

trigger .change() event after you attach events:
$(function () {
$('#checkbox1, #checkbox2').change(function () {
var row = $(this).closest('tr').prev();
if (!this.checked)
row.fadeIn('slow');
else
row.fadeOut('slow');
}).change();
});
Note: I make code shorter.
jsfiddle

Just call the change event after you initially register it:
$(document).ready(function () {
$('#checkbox').change(function () {
if (!this.checked)
$('#row').fadeIn('slow');
else
$('#row').fadeOut('slow');
});
$('#checkbox').change();
});

I believe this is what you were looking for:
$(function() {
var init = true;
$('input[type="checkbox"]').change(function() {
if (this.checked) {
if (init) {
$(this).prev().hide();
init = false;
} else $(this).prev().slideUp();
} else $(this).prev().slideDown();
}).change();
});
input[type='text'] {
display: block;
padding: 3px 5px;
margin: 5px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<input type="text" placeholder="Shown" />
<input type="checkbox" />Hide input
</div>
<div>
<input type="text" placeholder="Hidden" />
<input type="checkbox" checked/>Hide input
</div>

Generic solution without hardcoded ids:
$('table :checkbox').change(function(e, speed) {
speed = typeof speed == 'undefined' ? 'slow' : 0;
$(this).closest('tr').prev()[this.checked ? 'fadeOut' : 'fadeIn'](speed);
}).trigger('change', [0]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="row1">
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox1">Hide inputs</td>
</tr>
<tr id="row2">
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox2" checked>Hide inputs</td>
</tr>
</table>

just call the change function in document.ready after it
$('#checkbox').change();
Like this
$(document).ready(function () {
$('#checkbox').change(function () {
if (!this.checked) $('#row').fadeIn('slow');
else $('#row').fadeOut('slow');
});
$('#checkbox').change();
});
Here is the DEMO FIDDLE

Musefan's answer is excelent, but following is also another way!
$(document).ready(function () {
($('#checkbox').prop('checked')==true) ? $('#row').fadeOut('slow'):$('#row').fadeIn('slow');
$('#checkbox').change(function () {
if (!this.checked)
$('#row').fadeIn('slow');
else
$('#row').fadeOut('slow');
});
});

you can initially hide them if you really want the checkbox to be checked initially.
<table>
<tr id="row" style="display: none;">
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" checked>Hide inputs</td>
</tr>
</table>
<script>
$(document).ready(function () {
$('#checkbox').change(function () {
if (!this.checked)
$('#row').fadeIn('slow');
else
$('#row').fadeOut('slow');
});
});
</script>

var showOrHideRow=fucntion(isChecked){
if (isChecked)
$('#row').fadeOut('slow');
else
$('#row').fadeIn('slow');
};
$(document).ready(function () {
showOrHideRow($('#checkbox').is(":checked"));
$('#checkbox').change(function () {
showOrHideRow(this.checked);
});
});

$('#tbl_name tr').find('input:checkbox:checked').closest('tr').show();
$('#tbl_name tr').find('input:checkbox:Unchecked').closest('tr').hide();

Hide <td> with jquery based on input value

I would like to hide td if input value is 0 but I can't get it to work?
http://jsfiddle.net/zxpsd8x6/1/
<td><input type="radio" name="hideifvalue0" value"0"></td>
<td><input type="radio" name="hideifvalue0" value"1"></td>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("td").hide();
});
$(".btn2").click(function(){
$("td").show();
});
});
</script>

Not the way I would recommend, but this fixes the selectors:
JSFiddle: http://jsfiddle.net/swcmp2ws/
$(document).ready(function () {
$(".btn1").click(function () {
$('td:has(input[value="0"])').hide();
//or
$('input[value="0"]').parent().hide();
});
$(".btn2").click(function () {
$('td:has(input[value="0"])').show();
//or
$('input[value="0"]').parent().show();
});
});
Notes:
Your HTML was invalid - added table and tr elements
You should just use classes on common elements for simpler selectors (e.g. class="hidethese") and $('.hidethese').hide()

Change your HTML to:
<td><input type="radio" name="hideifvalue0" value="0"></td>
<td><input type="radio" name="hideifvalue0" value="1"></td>
Then your jQuery should be:
$(document).ready(function(){
$(".btn1").click(function(){
$("input[value='0']").parent().hide();
});
$(".btn2").click(function(){
$("input[value='0']").parent().show();
});
});

First of all your html elements are wrong. <td> should be inside <table><tr>
like:
<table>
<tr>
<td><input type="radio" name="hideifvalue0" value="0" /></td>
<td><input type="radio" name="hideifvalue0" value="1" /></td>
</tr>
</table>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
Then here your jQuery code goes:
$(".btn1").on('click', function () {
$("input:radio[value='0']").parent().hide();
});
$(".btn2").on('click', function () {
$("input:radio[value='0']").parent().show();
});

jQuery Find all rows that checked

I have a table with a checkbox .
I need to know which table rows was checked,
after clicking the Update button.
<div id='ggg' style="position:absolute; bottom:0px" id=>
<table class="display" id="poll">
<th>Polling</th>
<th>rrd</th>
<tr>
<td>ping</td>
<td>10.rrd</td>
<td>
<input type="checkbox" name="myTextEditBox" value="checked"/>
</td>
</tr>
<tr>
<td>snmp</td>
<td>11.rrd</td>
<td>
<input type="checkbox" name="myTextEditBox" value="checked" />
</td>
</tr>
</table>
<form>
<input type='button' id='update' value='update'>
</form>
</div>

Try this
$('#update').on('click',function(){
$('#poll').find('input:checked').closest('tr').css('background','green');
});
DEMO

You can use :checked selector to get checked checkbox along with .closest(tr) to get row. Try this:
checkedrows = $('input:checked').closest('tr');

Try this
$("#update").click(function () {
$('input:checked').each(function () {
alert($(this).closest("tr").text());
});
});
Demo
Edit
$("#update").click(function () {
$("#poll").find('input:checked').each(function () {
alert($(this).closest("tr").text());
});
});

You can use like this:
if you want to highlight to tr:
$('#update').on('click',function(){
$(':checked').parents('tr').css('background','#ff0');
});
if you want to highlight to td:
$('#update').on('click',function(){
$(':checked').parent().css('background','#ff0');
});

$('#update').click(function() {
var checkboxes = $('#poll').find('input:checked').closest('tr');
// this will give you which table rows was checked
});

How to select all checkboxes with jQuery?

I need help with jQuery selectors. Say I have a markup as shown below:
<form>
<table>
<tr>
<td><input type="checkbox" id="select_all" /></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]" /></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]" /></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]" /></td>
</tr>
</table>
</form>
How to get all checkboxes except #select_all when user clicks on it?

A more complete example that should work in your case:
$('#select_all').change(function() {
var checkboxes = $(this).closest('form').find(':checkbox');
checkboxes.prop('checked', $(this).is(':checked'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<table>
<tr>
<td><input type="checkbox" id="select_all" /></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]" /></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]" /></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]" /></td>
</tr>
</table>
</form>
When the #select_all checkbox is clicked, the status of the checkbox is checked and all the checkboxes in the current form are set to the same status.
Note that you don't need to exclude the #select_all checkbox from the selection as that will have the same status as all the others. If you for some reason do need to exclude the #select_all, you can use this:
$('#select_all').change(function() {
var checkboxes = $(this).closest('form').find(':checkbox').not($(this));
checkboxes.prop('checked', $(this).is(':checked'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<table>
<tr>
<td><input type="checkbox" id="select_all" /></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]" /></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]" /></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]" /></td>
</tr>
</table>
</form>

Simple and clean:
$('#select_all').click(function() {
var c = this.checked;
$(':checkbox').prop('checked', c);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<table>
<tr>
<td><input type="checkbox" id="select_all" /></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]" /></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]" /></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]" /></td>
</tr>
</table>
</form>

Top answer will not work in Jquery 1.9+ because of attr() method. Use prop() instead:
$(function() {
$('#select_all').change(function(){
var checkboxes = $(this).closest('form').find(':checkbox');
if($(this).prop('checked')) {
checkboxes.prop('checked', true);
} else {
checkboxes.prop('checked', false);
}
});
});

$("form input[type='checkbox']").attr( "checked" , true );
or you can use the
:checkbox Selector
$("form input:checkbox").attr( "checked" , true );
I have rewritten your HTML and provided a click handler for the main checkbox
$(function(){
$("#select_all").click( function() {
$("#frm1 input[type='checkbox'].child").attr( "checked", $(this).attr("checked" ) );
});
});
<form id="frm1">
<table>
<tr>
<td>
<input type="checkbox" id="select_all" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="select[]" class="child" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="select[]" class="child" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="select[]" class="child" />
</td>
</tr>
</table>
</form>

$(function() {
$('#select_all').click(function() {
var checkboxes = $(this).closest('form').find(':checkbox');
if($(this).is(':checked')) {
checkboxes.attr('checked', 'checked');
} else {
checkboxes.removeAttr('checked');
}
});
});

$(document).ready(function(){
$("#select_all").click(function(){
var checked_status = this.checked;
$("input[name='select[]']").each(function(){
this.checked = checked_status;
});
});
});

jQuery(document).ready(function () {
jQuery('.select-all').on('change', function () {
if (jQuery(this).is(':checked')) {
jQuery('input.class-name').each(function () {
this.checked = true;
});
} else {
jQuery('input.class-name').each(function () {
this.checked = false;
});
}
});
});

This code works fine with me
<script type="text/javascript">
$(document).ready(function(){
$("#select_all").change(function(){
$(".checkbox_class").prop("checked", $(this).prop("checked"));
});
});
</script>
you only need to add class checkbox_class to all checkbox
Easy and simple :D

$("#select_all").change(function () {
$('input[type="checkbox"]').prop("checked", $(this).prop("checked"));
});

Faced with the problem, none of the above answers do not work. The reason was in jQuery Uniform plugin (work with theme metronic).I hope the answer will be useful :)
Work with jQuery Uniform
$('#select-all').change(function() {
var $this = $(this);
var $checkboxes = $this.closest('form')
.find(':checkbox');
$checkboxes.prop('checked', $this.is(':checked'))
.not($this)
.change();
});

One checkbox to rule them all
For people still looking for plugin to control checkboxes through one that's lightweight, has out-of-the-box support for UniformJS and iCheck and gets unchecked when at least one of controlled checkboxes is unchecked (and gets checked when all controlled checkboxes are checked of course) I've created a jQuery checkAll plugin.
Feel free to check the examples on documentation page.
For this question example all you need to do is:
$( '#select_all' ).checkall({
target: 'input[type="checkbox"][name="select"]'
});
Isn't that clear and simple?

$('.checkall').change(function() {
var checkboxes = $(this).closest('table').find('td').find(':checkbox');
if($(this).is(':checked')) {
checkboxes.attr('checked', 'checked');
} else {
checkboxes.removeAttr('checked');
}
});

$("#select_all").live("click", function(){
$("input").prop("checked", $(this).prop("checked"));
}
});

I'm now partial to this style.
I've named your form, and added an 'onClick' to your select_all box.
I've also excluded the 'select_all' checkbox from the jquery selector to keep the internet from blowing up when someone clicks it.
function toggleSelect(formname) {
// select the form with the name 'formname',
// then all the checkboxes named 'select[]'
// then 'click' them
$('form[name='+formname+'] :checkbox[name="select[]"]').click()
}
<form name="myform">
<tr>
<td><input type="checkbox" id="select_all"
onClick="toggleSelect('myform')" />
</td>
</tr>
<tr>
<td><input type="checkbox" name="select[]"/></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]"/></td>
</tr>
<tr>
<td><input type="checkbox" name="select[]"/></td>
</tr>
</table>

Here's a basic jQuery plugin I wrote that selects all checkboxes on the page, except the checkbox/element that is to be used as the toggle:
(function($) {
// Checkbox toggle function for selecting all checkboxes on the page
$.fn.toggleCheckboxes = function() {
// Get all checkbox elements
checkboxes = $(':checkbox').not(this);
// Check if the checkboxes are checked/unchecked and if so uncheck/check them
if(this.is(':checked')) {
checkboxes.prop('checked', true);
} else {
checkboxes.prop('checked', false);
}
}
}(jQuery));
Then simply call the function on your checkbox or button element:
// Check all checkboxes
$('.check-all').change(function() {
$(this).toggleCheckboxes();
});

JavaScript +css - Change main category's checkbox css, if any items beneath it are checked

All,
I have the attached code snippet where a category checkbox is checked if all items underneath it are checked. How can I modify the code such that:
If any checkbox underneath any category is checked, the CSS Style of it's parent "Category" checkbox should look greyed out. (I do not want to disable the checkbox. Just look grey or any color through CSS). This will denote some items are checked if the category is collapsed.
If all items are checked underneath a category, then the checkbox doesn't have to look greyed out as it will be checked too.
All the existing code functionality should be maintained as it works great..
PS: Sorry for the HTML being a mess...
Any suggestions?
Thanks
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
</script>
<script language="JavaScript">
function toggleTableRows()
{
$(document).ready(function() {
$('img.parent')
.css("cursor","pointer")
.toggle(
function() {
$(this).attr("title","Click to Expand")
$(this).attr("src","arrow_collapsed.gif");
$('tr').siblings('#child-'+this.id).toggle();
},
function() {
$(this).attr("title","Click to Collapse");
$(this).attr("src","arrow_expanded.gif");
$('tr').siblings('#child-'+this.id).toggle();
}
);
initCheckBoxes();
});
}
function toggleCheckboxes(current, form, field) {
$(document).ready(function() {
$("#"+ form +" :checkbox[name^='"+ field +"[']")
.attr("checked", current.checked);
});
}
function toggleParentCheckboxes(current, form) {
var checked = $("#"+ form +" :checkbox[name='"+ current.name +"']").length ==
$("#"+ form +" :checkbox[name='"+ current.name +"']:checked").length;
// replace '[anything]' with '' instead of just '[]'
$("#"+ form +" :checkbox[name='"+ current.name.replace(/\[[^\]]*\]/, "") +"']")
.attr("checked", checked);
}
function initCheckBoxes(form) {
$("#"+ form +" :checkbox:checked").each(function() {
if (this.name.match(/chk[0-9]\[.*\]/)) {
toggleParentCheckboxes(this, form);
}
});
}
</script>
<script language="JavaScript">toggleTableRows();</script>
<style type="text/css">tr.c1 {display: none;}</style>
</head>
<body>
<form name="frmDinnerMenu" id="frmDinnerMenu" method="POST" action="">
<table border=1>
<tr>
<td><img class="parent" id="0" src="arrow_collapsed.gif" title="Click to Expand">Category - Fruits</td>
<td><input type="checkbox" name="chk0" onclick="toggleCheckboxes(this, 'frmDinnerMenu', 'chk0');"/></td>
</tr>
<tr class="c1" id="child-0">
<td>Apple</td>
<td><input type="checkbox" value="true" name="chk0[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr class="c1" id="child-0">
<td>Banana</td>
<td><input type="checkbox" value="false" name="chk0[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr class="c1" id="child-0">
<td>Orange</td>
<td><input type="checkbox" checked value="true" name="chk0[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr>
<td><img class="parent" id="1" src="arrow_collapsed.gif" title="Click to Expand">Category - Vegetables</td>
<td><input type="checkbox" name="chk1" onclick="toggleCheckboxes(this, 'frmDinnerMenu', 'chk1');"/></td>
</tr>
<tr class="c1" id="child-1">
<td>Eggplant</td>
<td><input type="checkbox" value="true" name="chk1[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr class="c1" id="child-1">
<td>Tomato</td>
<td><input type="checkbox" value="false" name="chk1[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr class="c1" id="child-1">
<td>Cabbage</td>
<td><input type="checkbox" checked value="true" name="chk1[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
</table>
</form>
</body>
</html>

Code looks familiar ;)
Include a CSS class similar to this one (add further styling if you need it)
.graymeout { background-color:#D8D8D8 }
Change toggleParentCheckboxes to this (some "optimizations" included. Refactored out common selector parts and removed a "double" selection by using filter)
function toggleParentCheckboxes(current, form) {
var selector1 = "#"+ form +" :checkbox[name='";
var selector2 = selector1 + current.name +"']";
var set = $(selector2);
var checked = set.length == set.filter(":checked").length;
// replace '[anything]' with '' instead of just '[]'
var ele = $(selector1 + current.name.replace(/\[[^\]]*\]/, "") +"']");
ele.attr("checked", checked);
if(!checked)
ele.addClass("graymeout")
else
ele.removeClass("graymeout");
ele=null; set=null; selector1=null; selector2=null;
}
If you change the call to initCheckBoxes in toggleTableRows to initCheckBoxes("frmDinnerMenu"); you will get the highlighting also on page load instead of just when first child is changed.

I had also used the same approach as mentioned by jitter. It works pretty well and in my opinion is the only option available since a tri-state check box is not available on a browser.