0

专家可以帮助菜鸟根据复选框选择显示/隐藏标签吗？

基本上，我希望 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>
4

3 回答 3

2

我不会把所有这些东西都放在一张大桌子上，而是有两个表格，隐藏和显示另一个，将它们封闭在一个 SECTION 或其他语义结构中，以显示它们在需要时是链接的。

如果这不是一个选项，请使用 THEAD 和 TBODY 将顶部和底部部分分开，并为 TBODY 提供您的q2id。在这样的表格中间使用 DIV 在语义上是不正确的。

这是您的代码与顶部周围有一个 THEAD 的表一起使用，并且您的 DIV 替换为 TBODY

http://jsfiddle.net/TNMwh/

于 2013-03-12T20:03:05.727 回答
1

你不能混合 div 和 tr

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

这是错误的

而是将 id="q2" 添加到 tr 元素

<tr id="q2">...</tr>
于 2013-03-12T19:59:05.057 回答
0

你不能把 a<tr>放在 a<div> 如果你只想隐藏一个<tr>然后添加 id 属性<tr> 如果你想从表中隐藏更多行，那么： 1. 定义一个 css 类，比如说 hiddenRow：.hiddenRow {display:none;} 2. 将这个类添加到您需要隐藏的所有行 3. 将您的脚本更新为$("tr.hiddenRow").hide();

于 2013-03-12T20:03:47.877 回答