Question

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

基本上，我想在页面加载时隐藏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>

Answer 1

我不会将所有这些内容保存在一个大表中，而是有两个表，隐藏并显示另一个表，将它们封装在SECTION或其他语义结构中，以显示它们是否需要链接。

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

这是你的代码使用桌子，顶部有一个THEAD，你的DIV被替换为TBODY

http://jsfiddle.net/TNMwh/

Answer 2

你不能混合div和tr

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

这是错误的

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

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

Answer 3

您无法在<tr>内放置<div> 如果您只想隐藏一个<tr>，请将id属性添加到<tr> 如果要隐藏表中的更多行，则： 1.定义一个css类，让我们说hiddenRow：.hiddenRow {display:none;} 2.将此类添加到需要隐藏的所有行中 3.将脚本更新为$("tr.hiddenRow").hide();

我需要帮助隐藏标签使用jquery隐藏/显示基于复选框

3 个答案: