Develop Reference

Select all checkboxes under tbody not working

I'm not sure why this jquery is not working. What I want is pretty straightforward: selecting all check boxes under the region. Could someone help tell why it's not working?
$(function(){
$('.select_all').change(function() {
var checkthis = $(this);
var checkboxes = $(this).next('tbody').find('.region_ct');
if(checkthis.is(':checked')) {
checkboxes.attr('checked', true);
} else {
checkboxes.attr('checked', false); }
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tr>
<th colspan=2>Americas</th>
</tr>
<tr>
<td colspan=2><input type="checkbox" name="region_am_all" class="select_all" value="X" /> Select All</td>
</tr>
<tbody>
<tr>
<td><input type="checkbox" class="region_ct" value="X" /> Argentina</td>
<td class="center"></td>
</tr>
<tr>
<td><input type="checkbox" class="region_ct" value="X" /> Barbados</td>
<td class="center"></td>
</tr>
</tbody>
<tr>
<th colspan=2>Asia</th>
</tr>
...
</table>

There are a couple of issues there:
I would strongly recommend against intermixing tr and tbody elements. If you're going to use tbody (and you should), use it consistently. Browsers may relocate tr elements into generated tbody elements.
The element you're calling next on doesn't have a following sibling (at all, much less the one you're looking for). You have to traverse up the hierarchy to the tr (if you don't fix #1) or the tbody (if you do).
You don't use attr to set checked, you use prop; and you can use your existing checked boolean rather than if/else, giving is simply checkboxes.prop("checked", this.checked);
Example with updated tbodys, and I've added some countries in the Asia area to demonstrate that only the relevant checkboxes are checked:
$(function() {
$('.select_all').change(function() {
var checkthis = $(this);
var checkboxes = $(this).closest('tbody').next().find('.region_ct');
checkboxes.prop("checked", this.checked);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tbody>
<tr>
<th colspan=2>Americas</th>
</tr>
<tr>
<td colspan=2>
<input type="checkbox" name="region_am_all" class="select_all" value="X" />Select All</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<input type="checkbox" class="region_ct" value="X" />Argentina</td>
<td class="center"></td>
</tr>
<tr>
<td>
<input type="checkbox" class="region_ct" value="X" />Barbados</td>
<td class="center"></td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan=2>Asia</th>
</tr>
<tr>
<td colspan=2>
<input type="checkbox" name="region_am_all" class="select_all" value="X" />Select All</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<input type="checkbox" class="region_ct" value="X" />China</td>
<td class="center"></td>
</tr>
<tr>
<td>
<input type="checkbox" class="region_ct" value="X" />Vietnam</td>
<td class="center"></td>
</tr>
</tbody>
</table>
You might also consider putting the select_all inside the same tbody with the checkboxes, so you could do away with next.

tbody isn't sibing of .select_all. You need to use .closest() to select parent of .select_all and use .find() to select .region_ct in it. Also you don't need to use if/else to check/uncheck checkbox. Only set this.checked to checked attribute of checkbox using .prop().
$('.select_all').change(function() {
$(this).closest('table').find('.region_ct').prop('checked', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tr>
<th colspan=2>Americas</th>
</tr>
<tr>
<td colspan=2><input type="checkbox" name="region_am_all" class="select_all" value="X" /> Select All</td>
</tr>
<tbody>
<tr>
<td><input type="checkbox" class="region_ct" value="X" /> Argentina</td>
<td class="center"></td>
</tr>
<tr>
<td><input type="checkbox" class="region_ct" value="X" /> Barbados</td>
<td class="center"></td>
</tr>
</tbody>
<tr>
<th colspan=2>Asia</th>
</tr>
</table>

How to hide table row has unchecked input using jquery

I'm trying to do a filter that when a button pressed it will show only the row has checked input in the table.
<table class="table">
<tr>
<th>Name</th>
<th>InUse</th>
<th></th>
</tr>
<tr>
<td>foo 1</td>
<td>
<input checked="checked" class="check-box" disabled="disabled" type="checkbox" />
</td>
<td>
Edit |
Details |
Delete
</td>
</tr>
<tr>
<td>foo 2</td>
<td>
<input checked="checked" class="check-box" disabled="disabled" type="checkbox" />
</td>
<td>
Edit |
Details |
Delete
</td>
<tr/>
<!-- not checked -->
<tr>
<td>foo 3</td>
<td>
<input class="check-box" disabled="disabled" type="checkbox" />
</td>
<td>
Edit |
Details |
Delete
</td>
</tr>
</table>

You can use :has selector or .has() method to checking existence of element in parent.
$("button").click(function(){
$("table tr").has(".check-box:not(:checked)").hide();
});
table, tr, td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>Name</th>
<th>InUse</th>
</tr>
<tr>
<td>foo 1</td>
<td>
<input class="check-box" type="checkbox" checked disabled />
</td>
</tr>
<tr>
<td>foo 2</td>
<td>
<input class="check-box" type="checkbox" disabled />
</td>
</tr>
<tr>
<td>foo 3</td>
<td>
<input class="check-box" type="checkbox" checked disabled />
</td>
</tr>
<tr>
<td>foo 4</td>
<td>
<input class="check-box" type="checkbox" disabled />
</td>
</tr>
</table>
<button>Only checked</button>
You can test code on full of you html in demo

Please use following jquery code. Onclick of submit button all the rows with unchecked checkboxes will be hide.
$(document).ready(function(){
$("input[type=submit]").click(function () {
$("input:not(:checked)").each(function () {
$(this).closest('tr').hide();
});
});
});

Please use jquery and place this code in your tag
$(document).ready(function () {
$("#btnClick").on("click", function () {
$(".table tr").each(function () {
if (!$(this).find("td input:checkbox").is(":checked")) {
$(this).hide();
}
})
})
});
This should work with your case.

This is a much simpler approach. Pass this to the onclick() event handler in your HTML and use jQuery:
<input type="checkbox" onClick="disablerow(this);">
function disablerow(el) {
if (el.checked == true) {
$(el).closest('tr').find(":input:text(:first)").attr('disabled', false);
}
else {
$(el).closest('tr').find(":input:text(:first)").attr('disabled', true);
}
}

How to pass text from view to javascript

Hi there i have problem with Rails & Javascript. Here is my table in view.
<table>
<thead>
<tr>
<th>No</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr id="adminrow">
<td>
1
</td>
<td>
John
</td>
</tr>
<tr id="adminrow">
<td>
2
</td>
<td>
Alex
</td>
</tr>
<tr id="adminrow">
<td>
3
</td>
<td>
Paul
</td>
</tr>
</tbody>
</table>
and my JS is
$('#select_name').click(function(event){
var username = $("#select_name").text();
console.log(username);
});
I have lot of names in my table, but JS printed first name in console. How can I print each name in the table to console?

You are creating in the each-loop N links (by the number of users) with the same select_name ID. Your javascript is confused, which one to choose. Try to add user id to your html select_name id and adjust your javascript accordingly. Same about your other id adminrow.
OR simply change your select_name to be a class and not id:
....
%a{:href=>"#", :class=>"select_name"}=u.firstname
....
$('.select_name').click(function(event){ ....
Ok, I am attaching the full code for you. For me it works just fine. E.g. prints just the name after clicking on the corresponding link:
<table>
<thead>
<tr>
<th>No</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="adminrow">
<td>
1
</td>
<td>
John
</td>
</tr>
<tr class="adminrow">
<td>
2
</td>
<td>
Alex
</td>
</tr>
<tr class="adminrow">
<td>
3
</td>
<td>
Paul
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$('.select_name').click(function(event){
var username = $(this).text();
console.log(username);
});
</script>

Failing applying jquery slice method over siblings tr (table rows)

The following code it is auto-explained:
HTML:
<table cellspacing="1" class="CRMP_WP_QUICKADS_PLUGIN">
<tr id="CRMP_WP_QUICKADS_tr_in_content">
<td>
<table>
<tr>
<td>
<input type="radio" name="in_content" value="1">
</td>
<td>
Enabled
</td>
</tr>
<tr>
<td>
<input type="radio" name="in_content" value="0">
</td>
<td>
Disabled
</td>
</tr>
</table>
</td>
</tr>
<tr>
<th colspan="2">
Hover Ads
</th>
</tr>
<tr>
<td>
...
</td>
</tr>
...
</table>
javascript:
$("input[name='in_content']").click(function(){
if ($(this).val()){
$("#CRMP_WP_QUICKADS_tr_in_content").nextAll().slice(0,6).show();
} else{
$("#CRMP_WP_QUICKADS_tr_in_content").nextAll().slice(0,6).hide();
}
});
The hide/show effect is not running.-

Does this work?
$("#CRMP_WP_QUICKADS_tr_in_content").nextAll()
.slice(0,6)
.each(function(index, element) {
element.hide();
});

// is not enough:
if ($(this).val())
// it must be:
if ($(this).val() == 1)

Select data from text fields in table using jQuery

I have a table as below;
<table id="mytable" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td><input type="text" name="qwer"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><input type="text" name="asddf"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><input type="text" name="zxcv"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><input type="text" name="poiu"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><input type="text" name="lkjh"></td>
<td> </td>
</tr>
<tr>
<td colspan="3"> <button id="BUT">BUT</button> </td>
</tr>
</table>
The middle cells contain text fields with names. I want to get data (I think .val()) from specific input fields. How can I get them? Say I want to alert value we enter in input name="zxcv".
You can see my Fiddle here.
How can I do this?

try this
$('#mytable input[name=zxcv]').val()

If you want to iterate on input fields, and show "name" and "value" when "BUT" is clicked :
$("#BUT").click(function() {
$("#mytable input").each(function() {
alert("name : " + $(this).attr('name') + " - value : " + $(this).val());
});
});