I have a dynamic list of dates. I want to create a checkbox for each unique date, and then list all dates in a table row format below. The goal is when a checkbox is checked/unchecked, any rows with a class the same as the checkbox value will hide/show.
Any help is appreciated.
$('input[type = checkbox]').change(function () {
var self = this;
$(self).closest('table').find('tbody tr').filter('.' + self.value).toggle(self.checked);
});
<div class="widget">
<div class="rowElem noborder">
<div class="formRight">
<label>
<input type="checkbox" class="show" value="2013-11-15" checked />2013-11-15</label>
</div>
<div class="formRight">
<label>
<input type="checkbox" class="show" value="2013-11-17" checked />2013-11-17</label>
</div>
<div class="formRight">
<label>
<input type="checkbox" class="show" value="2013-11-20" checked /> 2013-11-20</label>
</div>
</div>
</div>
<table>
<tbody>
<tr class="2013-11-15">
<td>2013-11-15</td>
</tr>
<tr class="2013-11-15">
<td>2013-11-15</td>
</tr>
<tr class="2013-11-20">
<td>2013-11-20</td>
</tr>
<tr class="2013-11-15">
<td>2013-11-15</td>
</tr>
<tr class="2013-11-17">
<td>2013-11-17</td>
</tr>
<tr class="2013-11-20">
<td>2013-11-20</td>
</tr>
</tbody>
</table>
Fiddle: http://jsfiddle.net/fEM8X/9/
Closest will select the ancestor or self (first one that matches the selector), but you want to select the sibling of ancestor (.widget) of the checked check box. So Try:
$('input[type = checkbox]').change(function () {
var self = this;
$(self).closest('.widget').next('table').find('tbody tr').filter('.' + self.value).toggle(self.checked);
});
Demo
But in this case you can just do the following since you use the same classes for the targets:
$('.' + this.value).toggle(self.checked);
Demo
Use this.value of the checked box and use it as class to toggle. You could simply do this.
$('input[type = checkbox]').change(function () {
var myclass = this.value;
$('.' + myclass).toggle();
});
jsFIDDLE DEMO
you can just add a css to tr, see this DEMO
$('input[type="checkbox"]').change(function () {
var self = this;
$("table tr."+$(this).val()).css({display: self.checked?"block":"none"});
});
I updated your fiddle
Basically, your selectors were not correct:
$('input[type = checkbox]').change(function () {
var valu = $(this).val();
var ischecked = $(this).is(":checked");
if( ischecked ){
$('.' + valu).show();
}else{
$('.' + valu).hide();
}
});
Related
This is my table row within the tbody of my table. I get dropdown value, text value but I can't get selected row value. My row value returns "undefined".
$(document).on("click", "#skorKartDegerle", function() {
$("#modal_evaluation").modal("show");
});
$(document).on("click", "#btnKaydet", function() {
var arrList = [];
var isEmptyAnswer = false;
$("#evaluationTable > tbody > tr").each(function() {
var line = $(this).find(".answerLine").val();
var ddlVal = $(this).find(".answerddl").val();
var txtVal = $(this).find(".answertxt").val();
var obj = '{"line":"' + line + '","ddlVal":"' + ddlVal + '","txtVal":"' + txtVal + '"}';
arrList.push(obj);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="answerLine" value="2">
<td>FR002</td>
<td>Koton Mağazacılık</td>
<td>1800</td>
<td>A</td>
<td>Kabul</td>
<td class="select" value="0">
<select class="answerddl">
<option value="1">Kabul</option>
<option value="2">Ret</option>
</select>
</td>
<td><input type="text" class="answertxt"></td>
</tr>
</tbody>
</table>
Part of the issue is because tr elements do not have a value attribute. To do what you require you could use a data attribute instead, to store custom metadata on the element. The other part is that this is a reference to the tr element. You're then calling find() on the element you're looking to target, so it will not be found as that method looks for descendants only.
In addition it's worth noting that you can make the logic more succinct by using map() to build the array instead of explicitly looping with each() and also that it would be better practice to store objects in the array and only JSON encode it before transferring via AJAX.
$(document).on("click", "#btnKaydet", function() {
var isEmptyAnswer = false;
let arrList = $("#evaluationTable > tbody > tr").map((i, tr) => {
let $tr = $(tr);
return {
line: $tr.data('value'),
ddlVal: $tr.find(".answerddl").val(),
txtVal: $tr.find(".answertxt").val()
}
}).get();
console.log(arrList);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="evaluationTable">
<tbody>
<tr class="answerLine" data-value="2">
<td>FR002</td>
<td>Koton Mağazacılık</td>
<td>1800</td>
<td>A</td>
<td>Kabul</td>
<td class="select" value="0">
<select class="answerddl">
<option value="1">Kabul</option>
<option value="2">Ret</option>
</select>
</td>
<td><input type="text" class="answertxt"></td>
</tr>
</tbody>
</table>
<button id="btnKaydet">Click me</button>
First I create a table with n number of rows and each one of them contains a checkbox. I need to get all the ids from all the row checked.
<body>
<table border='1' style='width:100%'>
<tr id='1'><td>'hi'</td><td><input type='checkbox' /></td></tr>
<tr id='2'><td>'hi'</td><td><input type='checkbox' /></td></tr>
<tr id='3'><td>'hi'</td><td><input type='checkbox' /></td></tr>
<tr id='4'><td>'hi'</td><td><input type='checkbox' /></td></tr>
</table>
<button id='test'>Get Checked</button>
</body>
This is what I got so far:
<script>
$(document).ready(function() {
$('#test').click(function(){
var getID = $(':checkbox:checked').closest('tr').attr('id');
alert(getID);
});
});
</script>
But this only gives me one id. If I select many rows I only get the first selected id. Also I need to store all the ids selected in an array for later use.
User jQuery's each function for this.
$(':checkbox:checked').each(function( index ) {
var closestTr = $(this).closest('tr').attr('id');
alert(closestTr);
});
In jQuery, use selector defaults to the first. so , we should use each get all selector element.
<script>
$(document).ready(function() {
$('#test').click(function(){
var arrId = [];
$(':checkbox:checked').each(function(){
var id = $(this).closest('tr').attr('id');
arrId.push(id);
})
console.log(arrId);
});
});
</script>
var getID = $(':checkbox:checked').closest('tr').attr('id');
Should be:
var getID = $('.checkbox:checked').closest('tr').attr('id');
Try something like this, demo in fiddle. Make sure adding open td , before each input checkbox
JS
$('#test').click(function(){
var ids = $(':checkbox:checked').map(function() {
var id = $(this).closest('tr').prop('id');
alert(id);
return id;
}).get();
alert(ids);
});
HTML
<table border='1' style='width:100%'>
<tr id='1'><td>'hi'</td><td><input type='checkbox' /></td></tr>
<tr id='2'><td>'hi'</td><td><input type='checkbox' /></td></tr>
<tr id='3'><td>'hi'</td><td><input type='checkbox' /></td></tr>
<tr id='4'><td>'hi'</td><td><input type='checkbox' /></td></tr>
</table>
<button id='test'>Get Checked</button>
Put and id on your table:
<table id="myTab" border='1' style='width:100%'>
To avoid getting other checkboxes in the page, select the checkboxes from within the table like:
var ids = [];
$('#mytab :checkbox:checked').each(function( index ) {
var closestTr = $(this).closest('tr').attr('id');
ids.push(closestTr);
});
alert(ids);
I'm a little stuck, can't get my head around this problem. I have setup some jQuery that identifies the values in radio inputs, which align with values within the table. This is the start to doing some filtering on a table.
I want the following three things to happen:
Whenever you click on a filter and the cell has the same value, it's row gets highlighted
Whenever you check that option off, it gets removed
If the page loads and an option is already checked, the row gets highlighted on load
jQuery Code:
$(function () {
// On Change of Radio Buttons
$('input').on('change', function () {
var filter = $('input:checkbox[name=filter]:checked').val();
// Edit the Rows
$(".gameStatus").filter(function () {
return $(this).text() == filter;
}).parent('tr').addClass('filtered');
});
});
jsfiddle:
http://jsfiddle.net/darcyvoutt/8xgd51mg/
$(function () {
var filters = [];
var edit_rows = function () {
filters = [];
$('input:checkbox[name=filter]:checked').each(function () {
filters.push(this.value);
});
// Edit the Rows
$(".gameStatus").each(function () {
$(this).parent('tr')
.toggleClass('filtered',
filters.indexOf($(this).text()) > -1
);
});
}
edit_rows();
// On Change of Radio Buttons
$('input').on('change', edit_rows);
});
jsfiddle
edit: added functionality so it gets invoked on page load
Here's alternate solution ...
$(function () {
function highlight() {
var filter = $(this).val();
var checked = this.checked;
// Edit the Rows
var affectedRows = $(".gameStatus").filter(function () {
return $(this).text() == filter;
});
if (checked) {
affectedRows.parent('tr').addClass('filtered');
} else {
affectedRows.parent('tr').removeClass('filtered');
}
}
$('input').each(highlight);
// On Change of Radio Buttons
$('input').on('change', highlight);
});
.filtered {
background: tomato;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="filters">
<input type="checkbox" name="filter" id="draft" value="Draft" checked />
<label for="draft">Draft</label>
<input type="checkbox" name="filter" id="active" value="Active" />
<label for="active">Active</label>
<input type="checkbox" name="filter" id="complete" value="Complete" />
<label for="complete">Complete</label>
<input type="checkbox" name="filter" id="acrhived" value="Archived" />
<label for="acrhived">Archived</label>
</div>
<table id="userManager">
<tbody>
<tr>
<th>Game</th>
<th>Teams</th>
<th>Status</th>
</tr>
<tr>
<td>Another Game</td>
<td>New Team, Project Lucrum</td>
<td class="gameStatus">Active</td>
</tr>
<tr>
<td>New Game</td>
<td>No teams selected</td>
<td class="gameStatus">Draft</td>
</tr>
<tr>
<td>New Game</td>
<td>New Team, Just in Case</td>
<td class="gameStatus">Active</td>
</tr>
</tbody>
</table>
<div class="test"></div>
</div>
try this. :)
$(function () {
var highlight = function(el){
if(el.is(':checked')){
$(".gameStatus:contains("+el.val()+")")
.parent('tr').addClass('filtered');
}else{
$(".gameStatus:contains("+el.val()+")")
.parent('tr').removeClass('filtered');
}
}
//On Load
highlight($('input[type="checkbox"][name=filter]:checked'));
// On Change of Radio Buttons
$('input').on('change', function () {
highlight($(this));
});
});
I am asking the user to select his/her gender . Later on I want to display the selected gender in another <div> element as shown below. How can I do this?
<div id="v1">
<table>
<tr>
<td>Male or Female</td>
</tr>
<tr>
<td align="left">
<select id="gender" name="gen">
<option>Male</option>
<option>Female</option>
<option>Do not wish to specify</option>
</select>
</td>
</tr>
</table>
</div>
Now I need to display the selected value in another <div>:
<div id="v2">
<h2>I WANT TO DISPLAY THE SELECTED VALUE HERE</h2>
</div>
Try this code if you are using jQuery.
$("#gender").change(function() {
$("#v2 h2").html($(this).val());
});
Demo
Try this:
$(function () {
$("#selection").on("change", function () {
var text = $(this).find('option:selected').text();
$('#v2 h2').text(text);
});
});
Demo here
To get also the value:
$(function () {
$("#selection").on("change", function () {
var text = $(this).find('option:selected').text();
var value = $(this).val();
var string = 'Text: '+text+' - Value: '+value;
$('#v2 h2').text(string);
});
});
Demo here
$(document).ready(function() {
$('#contact-location').change(function(){
var location = $(this).val(),
div = $('#' + location);
var txt=$('#txtfiled11').val();
div.append(txt);
$('.hide').hide();
div.show();
});
});
Another Demo
Update Fiddle DEMO with TEXTFIELD VALUE3
Use
$("#dropdown").prop("disabled", false);
I have a dynamically loaded table where each row has a checkbox option, with an assigned #id of either 1,2 or 3. I need to make a function that will shows a hidden div corresponding to the #id of the checkbox checked. I'm currently using .change() to trigger the function, but this ends up showing the hidden div when unchecking a box, which I do not want to happen. Is there another way to trigger this function for just on "checked", and not "unchecked". See code below:
<tr>
<td >
<input id="1" class="link_contact" type="checkbox"/>
</td>
</tr>
<tr>
<td >
<input id="2" class="link_contact" type="checkbox"/>
</td>
</tr>
<tr>
<td >
<input id="3" class="link_contact" type="checkbox"/>
</td>
</tr>
<div class="1" style="display:none;"> Some Hidden Text</div>
<div class="2" style="display:none;"> Some Hidden Text</div>
<div class="3" style="display:none;"> Some Hidden Text</div>
<script>
$(document).ready(function () {
$(".link_contact").change(function () {
$("." + $(this).attr('id')).fadeIn(800);
$("." + $(this).attr('id')).delay(7000).fadeOut(800);
});
});
</script>
Thanks,
Mark
Do the actions only if the checkbox is checked
$(document).ready(function () {
$(".link_contact").change(function () {
if (this.checked) {
$("." + this.id).stop(true, true).fadeIn(800).delay(7000).fadeOut(800);
$('.dialog_warning').fadeOut(800);
}
});
});
Demo: Fiddle
You need to use :checked selector with in the function is()
<script>
$(document).ready(function () {
$(".link_contact").change(function () {
if($(this).is(":checked")) {
$("." + $(this).attr('id')).fadeIn(800);
$("." + $(this).attr('id')).delay(7000).fadeOut(800);
$('.dialog_warning').fadeOut(800);
}
});
});
</script>
check this http://api.jquery.com/checked-selector/
Missing ending quote (after style attribute) in your html tag
<div class="3" style="display:none;> Some Hidden Text</div>