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();
});
Related
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();
I have this code to show <tr> in my table but with every click, it hides the textbox that must be shown when the button is clicked.
Below is my jQuery code to show the textbox:
$(function() {
$('#btnAdd').click(function() {
$('.td1').show();
});
});
And this is my code in <table>:
<button id="btnAdd" name="btnAdd" onclick="toggle();" class="span1">ADD</button>
<tr class="td1" id="td1" style="">
<td><input type="text" name="val1" id="val1"/></td>
<td><input type="text" name="val2" id="val2"/></td>
</tr>
You have invalid markup. You need to wrap tr in table.something like this:
<button id="btnAdd" name="btnAdd" class="span1" >ADD</button>
<table class="td1" style="display: block;" >
<tr id="td1" >
<td><input type="text" name="val1" id="val1"/></td>
<td><input type="text" name="val2" id="val2"/></td>
</tr>
</table>
And js would be:
$('#btnAdd').on('click', function (e) {
e.preventDefault();
var elem = $(this).next('.td1')
elem.toggle('slow');
});
Working Demo
It will help you
$(function() {
$('#btnAdd').click(function() {
$('.td1').toggle();
});
});
HTML
<button id="btnAdd" name="btnAdd" class="span1">ADD</button>
<table>
<tr class="td1" id="td1" style="">
<td><input type="text" name="val1" id="val1"/></td>
<td><input type="text" name="val2" id="val2"/></td>
</tr>
</table>
Demo
hope it is help you.
you can see my Example
$('#btnAdd').click(function() {
$('.td1').toggle('show');
});
You need to hide your element by default to make show() method works:
.td1 {
display: none;
}
Fiddle Demo
or you can use toggle() here:
$(function () {
$('#btnAdd').click(function (e) {
e.preventDefault();
$('.td1').toggle();
});
});
Fiddle Demo
Add button like So:
<td>
<button id="btnAdd" name="btnAdd">ADD</button>
</td>
and Jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#btnAdd").click(function () {
$('.td1').toggle();
});
});
</script>
i have a table where i am filling some data and have checkboxes besides each and the last check box is "ALL".
When i check this "ALL" checkbox remaining check boxes should be checked and vice versa.
code for filling data.
<div class="tablecontatiner">
<table>
<tr>
<th>Function</th>
<th>Add</th>
<th>Edit</th>
<th>View</th>
<th>Delete</th>
<th>All</th>
</tr>
#foreach (var item in Model)
{
<tr class="grouprow">
<td><input type="hidden"/><input id="#(item.Func_Code)" type="checkbox" style="visibility:hidden" />#item.FunctionName</td>
<td><input id="#(item.Func_Code + "A")" type="checkbox" value="Add" #(item.Add==true?"checked":"") /></td>
<td><input id="#(item.Func_Code + "E")" type="checkbox" value="Edit" #(item.Edit==true?"checked":"") /></td>
<td><input id="#(item.Func_Code + "V")" type="checkbox" value="View" #(item.View==true?"checked":"")/></td>
<td><input id="#(item.Func_Code + "D")" type="checkbox" value="Delete" #(item.Delete==true?"checked":"")/></td>
<td><input id="#(item.Func_Code + "ALL")" type="checkbox" value="All"/></td>
</tr>
}
</table>
</div>
and my UI looks like :
Try this
$('#checkboxAll').on('change', function () {
$(this).closest('.grouprow').find(':checkbox').not(this).prop('checked', this.checked);
});
$('table tr input:checkbox:not("#checkboxAll")').on('change', function () {
if (!this.checked) {
$('#checkboxAll').prop('checked', false);
}
});
DEMO
Try
jQuery(function ($) {
//listen to the change of checkbox in the last td
$('.tablecontatiner td:last-child input').on('change', function () {
//update the checked property of all checkboxes in the same row as the changed checkbox
$(this).closest('tr').find('input[type="checkbox"]').not(this).prop('checked', this.checked);
})
})
Try,
$('#chkAll').on('click', function () {
$(this).closest('.grouprow').find(':checkbox').not(this).prop('checked', this.checked);
});
Anton's solution is very elegant.
If you load (or reload) the table and don't want to set the event handlers each time it is reloaded, then I would change a bit the solution:
$('.tablecontatiner').on('change', '[id$=All]', function () {
$(this).closest('.grouprow').find('input').not(this).prop('checked', this.checked);
});
Remark: Also I would give "checkboxAll" class to each "ALL" checkbox, so it will look like:
<input id="#(item.Func_Code + "ALL")" type="checkbox" value="All" class="checkboxAll"/>
and then the code above will be:
$('.tablecontatiner').on('change', '.checkboxAll', function () {
$(this).closest('.grouprow').find('input').not(this).prop('checked', this.checked);
});
http://jsbin.com/jetewayi/1/edit
I have some code which I got from jquery which i modified a bit to that all checked box values
will populate a text input element.
this works perfectly on jsfiddle.. see link to demo
http://jsfiddle.net/aAqt2/
but when I try it on my out site, it does not work.. any Idea why? see my code below
<html><head>
<script src="/js/jquery.min.js"></script>
<script type="text/javascript">
$('input').on('change', function() {
var values = $('input:checked').map(function() {
return this.value;
}).get();
$('#output').val(values.toString());
});
</script>
</head>
<body>
<from name="test">
<table>
<tr>
<td><input type=checkbox value="1"></td>
</tr>
<tr>
<td><input type=checkbox value="2"></td>
</tr>
<tr>
<td><input type=checkbox value="3"></td>
</tr>
<tr>
<td><input type=checkbox value="4"></td>
</tr>
<tr>
<td><input type=checkbox value="5"></td>
</tr>
<tr>
<td><input type="text" id="output"></td>
</tr>
</table>
</form>
</body>
</html>
You need to wrap your code in a document ready call or place it at the end of the page before the closing body tag. JSfiddle is doing that for you automatically.
Ex:
$(document).ready(function () {
$('input').on('change', function () {
var values = $('input:checked').map(function () {
return this.value;
}).get();
$('#output').val(values.toString());
});
});
Wrap your code in a DOM ready function:
$(document).ready(function() {
//code here
});
You need to put your code inside a ready function.
$(document).ready(function () {
$('input').on('change', function() {
var values = $('input:checked').map(function() {
return this.value;
}).get();
$('#output').val(values.toString());
});
});
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();
});