Reputation: 31
I need help hiding <tr> tags using jquery hide/show based on checkbox
Can an expert help a rookie show/hide tags based on checkbox selections?
Basically, I want id=q2 to be hidden on page load. When a users checks the first checkbox, it should appear and when unchecked, should hide.
I tried implementing code found on this site, but it's not working.
This is my jquery code and using IDs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script language="javascript">
$(document).ready(function() {
$("#q2").hide();
$("#q1a").change(function () {
if(this.checked) {
$('#q2').show();
} else {
$('#q2').hide();
}
});
})
</script>
</head>
This is my HTML portion and depending on the first checkbox, it should show/hide id=q2.
<body>
<table>
<tr>
<td colspan="2"><input type="checkbox" name="Quais_medicamentos_voce_utiliza_Insulina" value="1" id="q1a" />
Insulina<br />
<input type="checkbox" name="Quais_medicamentos_voce_utiliza_GLP_1" value="1" />
Análogo de GLP-1 (Victoza ou Byetta)<br />
<input type="checkbox" name="Quais_medicamentos_voce_utiliza_Antidiabetico" value="1" />
Antidiabético Oral (comprimido)<br />
<input type="checkbox" name="Quais_medicamentos_voce_utiliza_Nao_utilizo" value="1" />
Não utilizo nenhum medicamento<br />
<input type="checkbox" name="Quais_medicamentos_voce_utiliza_Nao_sei" value="1" />
Não sei</td>
</tr>
<tr>
<td> </td>
</tr>
<div id="q2">
<tr>
<td height="23" colspan="2">Quais insulinas você utiliza?</td>
</tr>
<tr>
<td colspan="2"><table width="809">
<tr>
<td width="173" valign="top"><input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Apidra" value="1" />
Apidra<br />
<input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Humalog_Mix_25" value="1" />
Humalog Mix 25<br />
<input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Humalog" value="1" />
Humalog<br />
<input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Humalog_Mix_50" value="1" />
Humalog Mix 50<br />
<input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Humulin_70_30" value="1" />
Humulin 70/30<br />
<input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Humulin_N" value="1" />
Humulin N <br /></td>
<td width="157" valign="top"><p>
<input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Humulin_R" value="1" />
Humulin R<br />
<input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Insunorm_N" value="1" />
Insunorm N<br />
<input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Insunorm_R" value="1" />
Insunorm R<br />
<input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Insunorm_70_30" value="1" />
Insunorm 70/30 <br />
<input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Lantus" value="1" />
Lantus <br />
<input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Levemir" value="1" />
Levemir<br />
<br />
</p></td>
<td width="187" valign="top"><input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Novolin_70_30" value="1" />
Novolin 70/30 <br />
<input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Novolin_N" value="1" />
Novolin N<br />
<input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Novolin_R" value="1" />
Novolin R<br />
<input type="checkbox" name="Qual_is_insulinas_voce_utiliza_NovoMix_30" value="1" />
NovoMix 30<br />
<input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Novorapid" value="1" />
Novorapid<br />
<input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Farmanguinhos_NPH" value="1" />
Farmanguinhos - NPH </td>
<td width="272" valign="top"><p>
<input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Farmanguinhos_regular" value="1" />
Farmanguinhos - Regular <br />
<input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Farmanguinhos_NPH_30_70" value="1" />
Farmanguinhos - 30/70 <br />
<input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Nao_sabe" value="1" />
Não sabe <br />
</p></td>
</tr>
</table></td>
</tr>
</div>
</table>
</body>
</html>
Upvotes: 0
Views: 573
Answers (3)
Reputation: 1914
You cannot place a <tr> inside a <div>
If you want to hide just one <tr> then add the id attribute to that <tr>
If you want to hide more rows from the table, then:
1. define a css class, let's say hiddenRow: .hiddenRow {display:none;}
2. add this class to all the rows you need to hide
3. update your script to $("tr.hiddenRow").hide();
Upvotes: 0
Reputation: 1082
I'd not keep all that stuff in one big table, and instead have two tables, hiding and showing the other, enclosing them in a SECTION or some other semantic structure to show they are linked if need be.
If that is not an option, separate the top and bottom sections with THEAD and TBODY, and give the TBODY your q2 id. Using a DIV in the middle of a table like that is not semantically correct.
Here's your code working with the table having a THEAD around the top bit, and your DIV replaced with a TBODY
Upvotes: 2
Reputation: 1323
You can't mix div and tr
</tr>
<div id="q2">
<tr>
this is wrong
instead add id="q2" to tr element
<tr id="q2">...</tr>
Upvotes: 1
Related Questions
- Show or hide table row if checkbox is checked
- Toggle hide/show <tr> using jQuery
- How to hide and show table tr's by value of first row
- Hiding table rows with Jquery, and multiple checkboxes
- Show Hide Table Row based on Check Box
- How to hide table rows which have their checkboxes
- jQuery hide table rows depending on checkbox click
- how to hide all tr with checked checkboxes?
- hiding the tr tags and showing them after the uncheck
- Hiding tr tags within div tags using jQuery