Develop Reference

How to hide a row if checkbox is not selected inside html table?

I have dynamically created checkboxes inside HTML table like given in the following code. And I am trying to hide the rows whose checkbox is not checked by using below lines of code on the another button click() function.
$(document).on("click", "#allotBtn", function() {
$('#studentListBody tr [type="checkbox"]').each(function(i, chk) {
if (!chk.checked) {
$("#studentList tr:nth-child(" + i + ")").css("display", "none");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tbody id="studentListBody">
<tr role="row" class="odd">
<td class="centeralign hideFirstTD sorting_1">
<div class="checkbox checkbox-success ">
<input class="commoncheckbox" type="checkbox" id="studentId_-5ab87edaff24ae1204000857" name="studentId_-5ab87edaff24ae1204000857" value="5ab87edaff24ae1204000857">
<label></label>
</div>
</td>
<td class=" align-middle ">
<img alt="image" class="img-circle listProfilePicture" src="../img/studentcap.png">
</td>
<td>Raja Mir</td>
<td>7th</td>
<td>Male</td>
<td>Active</td>
<td>2016</td>
</tr>
<tr role="row" class="even">
<td class="centeralign hideFirstTD sorting_1">
<div class="checkbox checkbox-success ">
<input class="commoncheckbox" type="checkbox" id="studentId_-5ab8d5f8ff24ae120400085f" name="studentId_-5ab8d5f8ff24ae120400085f" value="5ab8d5f8ff24ae120400085f">
<label></label>
</div>
</td>
<td class=" align-middle ">
<img alt="image" class="img-circle listProfilePicture" src="../img/studentcap.png">
</td>
<td>Omer Jan</td>
<td>4th</td>
<td>Male</td>
<td>Active</td>
<td>2018</td>
</tr>
</tbody>
If there are more than 3 rows in the table, the above code hides the rows haphazardly.
Please help!!!

Try this:
$("#allotBtn").click(function(){
$('#studentListBody tr [type="checkbox"]:checked').closest("tr").hide();
});

The issue with your code is that i in the .each() loop starts indexing the elements at 0, whereas when you call nth-child in CSS, the first element is numbered as 1. Therefore the row you hide is always off by 1.
The fix is simple - add 1 to i each time you use it to set nth-child:
$(document).on("click", "#allotBtn", function () {
$('#studentListBody tr [type="checkbox"]').each(function(i, chk) {
if (!chk.checked) {
$("#studentListBody tr:nth-child("+(i+1)+")").css("display", "none");
}
});
});
Working demo: http://jsfiddle.net/jqabpru2/9/
Reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
https://api.jquery.com/each/
Or of course you can simplify it much more like in Viam's answer (https://stackoverflow.com/a/51762843/5947043) by finding the row which is the parent of the checkbox instead.
Again, credit to Viam, this can be done by writing
$("#allotBtn").click(function(){
$('#studentListBody tr [type="checkbox"]:checked').closest("tr").hide();
});
instead. Demo of this approach: http://jsfiddle.net/jqabpru2/10/

All you have to do is write the following code instead of your current jQuery code in a click function:
var checkList = $("tr[role='row'] .commoncheckbox");
checkList.each(function(){
$($(this).closest("tr[role='row']").hide());
if($(this).is(":checked")){
$($(this).closest("tr[role='row']").show());
}
});
Here is jsfiddle link on this.
Here is how to check a checkbox is checked or not using jQuery.

This one-liner should do it. No need for loops.
$(function() {
$(document).on("click", "#allotBtn", function() {
$('#studentListBody input[type=checkbox]:not(:checked)').closest('tr').hide();
});
});
Also, attaching the click event like this seems super strange - what exactly are you delegating the event to the document itself for anyway? Is the whole thing loaded dynamically?

Get data attribute of a <td> when specific cell is clicked

Here is my HTML code.
How can I get the value of the data attribute when click the cell?
<td id = "orderIds" data-cids="213,431">orders</td>
What should I use to trigger an event when I click on the <td> cell?

Please check below mentioned solution.
$('td').click(function(){
alert($(this).data('cids'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id = "orderIds" data-cids="213,431">orders</td>
<td data-cids="23,43">12</td>
<td data-cids="21,41">23</td>
<td data-cids="13,31">34</td>
</tr>
</table>

you need clicked cell data attribute so use of this will do the needful. use following snippet and it should work.
$('td').click(function(){
var data = $(this).data('cids');
})

Bind a click event handler by selecting cell using the has-attribute selector(optional) and get data attribute value using data() method.
$('td[data-cids]').click(function() {
console.log($(this).data('cids'));
// or use `this.dataset.cids`
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td data-cids="213,431">orders</td>
<td data-cids="123,234">orders</td>
</tr>
</table>

With pure js...
orderIds.onclick=function(){
console.log(this.dataset.cids)
}
you can also use $('#orderIds) with jQuery

Only one checkbox is checked at the time [duplicate]

So i have a div thats auto generated and inside are 3 check boxes with different id's & names and by default none of them are checked!! If one happens to get checked then i need the other two unchecked!!
So only one can be checked at a time ...
So all unchecked or only one checked!
<div class="configoptions">
<table class="configtable" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="fieldlabel">Include:</td>
<td class="fieldarea">
<label><input name="configoption[10]" id="co30" value="1" onclick="recalc()" type="checkbox">green</label>
</td>
</tr>
<tr>
<td class="fieldlabel">Include:</td>
<td class="fieldarea">
<label><input name="configoption[9]" id="co27" value="1" onclick="recalc()" type="checkbox">blue</label>
</td>
</tr>
<tr>
<td class="fieldlabel">Include:</td>
<td class="fieldarea">
<label><input name="configoption[11]" id="co31" value="1" onclick="recalc()" type="checkbox">white</label>
</td>
</tr>
</tbody>
</table>
</div>
Here is what i used to uncheck all divs on page ready.. since initially i need them unchecked.. that works great... now i need to make it so only one is check at a time if it is checked! Can someone gimme a hand,? Thx in advance!
$(document).ready(function() {
$('input[type=checkbox]').each(function() {
this.checked = false;
});
});

Use the prop function to change the checked property of checkbox and radio buttons
$(function(){
$('input:checkbox').prop('checked', false)
$('input:checkbox').click(function(){
if($(this).is(':checked')){
$('input:checkbox').not(this).prop('checked', false);
}
});
})
Demo: Fiddle

I had a similar issue and solved it like so (using part of Arun P Johny's answer - I wanted to share for those of you who might come across this as well.)
(function($checkbox,options){
$($checkbox).on('change', function() {
$("input[type='checkbox']").not(this).prop('checked', false);
});
});

using jquery find('.classname') not working for locating TD elements?

I am traversing the divs on my page and looking up child elements using find and supplying a classname
select elements and input elements are located, but the 3 TDs I am trying to find are returning nothing
Here is the code snippet
$.each($(".ccypair"), function(index, element) {
var elements = {
selectElement : $(element).find('.selectstyle'),
inputElement : $(element).find('.inputstyle'),
tdElement1 : $(element).find('.decayTime'),
tdElement2 : $(element).find('.price.bidprice'),
tdElement3 : $(element).find('.price.offerprice')
};
});
Now the first two find() lines work fine, but the three tdElement ones below resolve to nothing. Anyone able to tell me where I am going wrong. I suspect for TD I need to have a different selector?
Apologies here is the html
<div class="ccypair" id="ccypairdiv_0">
<form>
<table>
<tr>
<td colspan="2" class="top currency"><select class="ccypairselect"/></td>
<td colspan="2" class="top volume"><input class="ccypairvolume" type="text" value="1m" autocomplete="off"/></td>
<td colspan="2" class="decaytime">00h:00m:00s</td>
</tr>
<tr>
<td colspan="3" class="price bidPrice">---.---</td>
<td colspan="3" class="price offerPrice">---.---</td>
</tr>
</table>
</form>
</div>
<div class="ccypair" id="ccypairdiv_1">
<form>
<table>
<tr>
<td colspan="2" class="top currency"><select class="ccypairselect"/></td>
<td colspan="2" class="top volume"><input class="ccypairvolume" type="text" value="1m" autocomplete="off"/></td>
<td colspan="2" class="top decaytime">00h:00m:00s</td>
</tr>
<tr>
<td colspan="3" class="price bidPrice">---.---</td>
<td colspan="3" class="price offerPrice">---.---</td>
</tr>
</table>
</form>
</div>
Thanks

First check if your jQuery is loading with the $, the try this
//think about structure, it makes your code more legible
$(".ccypair").each(function(index) {
var element = $(this); //each .ccypair found
var elements = {
selectElement : element.find('.selectstyle'),
inputElement : element.find('.inputstyle'),
tdElement1 : element.find('.decayTime'),
tdElement2 : element.find('.price.bidprice'),
tdElement3 : element.find('.price.offerprice')
};
});
cheers

As always a back to basics approach worked. A simple typo was the root cause here. Apologies
On that note. Does jQuery provide a flag so that rather than failing to locate an element and failing silently it will print out an error message. This would be really helpful?

How to create pop up on selecting the checkbox in HTML

I have a table. Inside table i have rows, each with a column : checkbox.
as following
<table>
<tr class="row">
<td class ="checkclass" ><input type="checkbox"></td>
<td></td>
<td></td>
</tr>
<tr class="row">
<td class ="checkclass" ><input type="checkbox"></td>
<td></td>
<td></td>
</tr>
</table>
I want whenever i select the checkbox, a pop up is created.
Please note : i can not edit the html code.. However i can only do some changes in javascript.
PS : At last i want to highlight the selected row.

well you could use the Jquery library and take advantage of the .change() functionality
$('.target').change(function() {
alert('Handler for .change() called.');
});
reference: http://api.jquery.com/change/
On how to use JQuery is a different question
Now for javascript its a bigger hack:
function checkAddress(checkbox)
{
if (checkbox.checked)
{
alert("a");
}
}
To add the on click on the HTML with Javascript
document.getElementById("ElementID").setAttribute("onchange", function() {checkAddress(this));
HTML
<input type="checkbox" name="checkAddress" />

please check following links
http://jqueryui.com/dialog/#modal-form
http://www.mywebdeveloperblog.com/my-jquery-plugins/modalpoplite

<td class ="checkclass" ><input type="checkbox" onchange='checkBoxClicked();'></td>
function checkBoxClicked()() {
alert("Hi");
}
for more info you can use [javascript pop-up][1] but i will suggest to go with jQuery or modal
[1]: http://www.echoecho.com/jsbasics.htm

you can do with jquery
$('.checkclass input').change(function() {
// code here
});
I hope it will help to solve your problem.