2013-03-12 77 views
0

專家可以幫助菜鳥顯示/隱藏基於複選框選擇標籤?我需要幫助隱藏<tr>標籤使用jQuery隱藏/顯示基於複選框

基本上,我希望頁面加載時隱藏id = q2。當用戶檢查第一個複選框時,它應該出現,並且在未選中時應該隱藏。

我試着實現在這個網站上找到的代碼,但它不工作。

這是我的jquery代碼,並使用ID的

<!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> 

這是我的HTML部分,並且根據第一個複選框,它應該顯示/隱藏ID = Q2。

<body> 
<table> 
    <tr> 
    <td colspan="2"><input type="checkbox" name="Quais_medicamentos_voce_utiliza_Insulina" value="1" id="q1a" /> 
     &nbsp;&nbsp;Insulina<br /> 
     <input type="checkbox" name="Quais_medicamentos_voce_utiliza_GLP_1" value="1" /> 
     &nbsp;&nbsp;Análogo de GLP-1 (Victoza ou Byetta)<br /> 
     <input type="checkbox" name="Quais_medicamentos_voce_utiliza_Antidiabetico" value="1" /> 
     &nbsp;&nbsp;Antidiabético Oral (comprimido)<br /> 
     <input type="checkbox" name="Quais_medicamentos_voce_utiliza_Nao_utilizo" value="1" /> 
     &nbsp;&nbsp;Não utilizo nenhum medicamento<br /> 
     <input type="checkbox" name="Quais_medicamentos_voce_utiliza_Nao_sei" value="1" /> 
     &nbsp;&nbsp;Não sei</td> 
    </tr> 
    <tr> 
    <td>&nbsp;</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" /> 
       &nbsp;&nbsp;Apidra<br /> 
       <input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Humalog_Mix_25" value="1" /> 
       &nbsp;&nbsp;Humalog Mix 25<br /> 
       <input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Humalog" value="1" /> 
       &nbsp;&nbsp;Humalog<br /> 
       <input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Humalog_Mix_50" value="1" /> 
       &nbsp;&nbsp;Humalog Mix 50<br /> 
       <input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Humulin_70_30" value="1" /> 
       &nbsp;&nbsp;Humulin 70/30<br /> 
       <input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Humulin_N" value="1" /> 
       &nbsp;Humulin N <br /></td> 
      <td width="157" valign="top"><p> 
       <input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Humulin_R" value="1" /> 
       &nbsp;Humulin R<br /> 
       <input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Insunorm_N" value="1" /> 
       &nbsp;Insunorm N<br /> 
       <input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Insunorm_R" value="1" /> 
       &nbsp;Insunorm R<br /> 
       <input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Insunorm_70_30" value="1" /> 
       &nbsp;Insunorm 70/30 <br /> 
       <input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Lantus" value="1" /> 
       &nbsp;Lantus <br /> 
       <input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Levemir" value="1" /> 
       &nbsp;Levemir<br /> 
       <br /> 
       </p></td> 
      <td width="187" valign="top"><input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Novolin_70_30" value="1" /> 
       &nbsp;&nbsp;Novolin 70/30 <br /> 
       <input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Novolin_N" value="1" /> 
       &nbsp;&nbsp;Novolin N<br /> 
       <input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Novolin_R" value="1" /> 
       &nbsp;Novolin R<br /> 
       <input type="checkbox" name="Qual_is_insulinas_voce_utiliza_NovoMix_30" value="1" /> 
       &nbsp;NovoMix 30<br /> 
       <input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Novorapid" value="1" /> 
       &nbsp;Novorapid<br /> 
       <input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Farmanguinhos_NPH" value="1" /> 
       &nbsp;Farmanguinhos - NPH </td> 
      <td width="272" valign="top"><p> 
       <input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Farmanguinhos_regular" value="1" /> 
       &nbsp;Farmanguinhos - Regular <br /> 
       <input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Farmanguinhos_NPH_30_70" value="1" /> 
       &nbsp;Farmanguinhos - 30/70 <br /> 
       <input type="checkbox" name="Qual_is_insulinas_voce_utiliza_Nao_sabe" value="1" /> 
       &nbsp;Não sabe <br /> 
       </p></td> 
      </tr> 
     </table></td> 
    </tr> 
    </div> 
</table> 
</body> 
</html> 

回答

1

不能混合DIV和TR

</tr> 
<div id="q2"> 
<tr> 

這是錯誤的

,而不是添加ID = 「Q2」 到tr元素

<tr id="q2">...</tr> 
+0

僅供參考,他想要隱藏/顯示多個TR,所以雖然這實際上在_a_行上工作,但它不會完成所需的操作。 – veddermatic 2013-03-12 20:49:12

2

我倒是不把所有這些東西放在一張大桌子裏,而是有兩張桌子,隱藏和顯示另一張桌子,把它們放在SECTION或其他語義結構中t o如果需要的話,表明它們是相連的。

如果這不是一個選項,用THEAD和TBODY分開頂部和底部部分,並給TBODY分配你的ID號碼q2。在表格中間使用DIV在語義上不是正確的。

這裏與表工作的代碼有各地的頂級有點THEAD,和你的DIV與TBODY更換

http://jsfiddle.net/TNMwh/

0

你不能。如果你只想隱藏放置<tr><div> 一個<tr>然後id屬性添加到<tr> 如果你想從表中隱藏更多行,那麼:1。 定義CSS類,比方說hiddenRow:.hiddenRow {display:none;} 2.本類添加到所有行,你需要隱藏 3.更新您的腳本到$("tr.hiddenRow").hide();