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());
});
});
Related
I 'm trying to get the text of the td that belong to checked radio buttons, but I can't and my code doesn't work correctly:
<tr>
<td><input name="radio_org_id" type="radio"></td>
<td>male</td>
</tr>
$("body").on("change", "input[name='radio_org_id']:radio:checked", function () {
$('input[name="radio_org_id"]:radio:checked').each(function () {
var vIns_title = $(this).next().find('td').text()
alert(vIns_title)
});
Use $(this).parent().next("td").text()
$("body").on("change", "input[name='radio_org_id']:radio:checked", function() {
$('input[name="radio_org_id"]:radio:checked').each(function() {
var vIns_title = $(this).parent().next("td").text()
alert(vIns_title)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><input name="radio_org_id" type="radio"></td>
<td>male</td>
</tr>
<tr>
<td><input name="radio_org_id" type="radio"></td>
<td>female</td>
</tr>
</table>
Try this $(this).closest('td').next('td').text() document for closest(). And your click function selector was wrong.so change as like this "input[name='radio_org_id']"
$("body").on("change", "input[name='radio_org_id']", function() {
$('input[name="radio_org_id"]:checked').each(function() {
var vIns_title = $(this).closest('td').next('td').text()
console.log(vIns_title)
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><input name="radio_org_id" type="radio"></td>
<td>male</td>
</tr>
<table>
Your initial selector is flawed as you only select already checked elements. The :radio is also redundant.
To fix your issue, use closest().next() to get the sibling td element. Try this:
$('table').on("change", "input[name='radio_org_id']", function() {
if ($(this).is(':checked')) {
var vIns_title = $(this).closest('td').next('td').text()
console.log(vIns_title)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><input name="radio_org_id" type="radio"></td>
<td>male</td>
</tr>
<tr>
<td><input name="radio_org_id" type="radio"></td>
<td>female</td>
</tr>
</table>
You should also note that you could potentially make this much simpler by placing a value on the radio input and reading that out in the JS code.
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 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();
});
I have a markup like this
<table id="data">
<tr>
<td>Name</td>
<td>Test</td>
</tr>
<tr>
<td>
<input type="hidden" id="file-name" value="file.doc">
</td>
<td><input type="text" value="Test 1"></td>
</tr>
<tr>
<td>
<input type="hidden" id="file-name" value="file1.docx">
</td>
<td><input type="text" value="Test 2"></td>
</tr>
<tr>
<td>
<input type="hidden" id="file-name" value="file.pdf">
</td>
<td><input type="text" value="Test 3"></td>
</tr>
</table>
Remove File
In that markup you can see I have file name as hidden fields and under the table I have a remove file tag. So the thing is like this when I will click on the remove file then it will remove that entire row(tr tag) inside where the filename
file.doc is present. So for that I have made my js like this
<script type="text/javascript">
$(document).ready(function() {
$('#remove').click(function(e) {
var FileName = 'file.doc';
var GetRowVal = $('table#data td #file-name').val();
if(GetRowVal == FileName ) {
var Parent = $(GetRowVal).parent().remove();
}
else {
console.log(' error');
}
});
});
</script>
But it is not removing the row. So can someone kindly tell me whats the issue here? Any help and suggestions will be really apprecaible. Thanks
There are duplicate id's in your Html,just correct that issue and try below answer :
<script type="text/javascript">
$(document).ready(function() {
$('#remove').click(function(e) {
e.preventDefault();
var FileName = 'file.doc';
$('input[type="hidden"]').each(function(){
if( $(this).val() == FileName )
{
$(this).closest('tr').remove();
}
});
});
});
</script>
Following code return Array of Jquery Object.
Then function .val() cannot have meaning.
$('table#data td #file-name');
You have two probles in this code:
first : Ids are not unique.
second:
var GetRowVal = $('table#data td #file-name').val();
will hold only value eg. file.doc
so you can't later
remove the object in this line:
var Parent = $(GetRowVal).parent().remove();
so to repair it first change id to class like here:
<input type="hidden" class="file-name" value="file.doc">
and later You can modify your code:
$(document).ready(function() {
$('#remove').click(function(e) {
var GetRowVal = $(".file-name[value='file.doc']");
$(GetRowVal).parent().parent().remove();
});
});
Here jsfiddle
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();
});