Javascript jquery div show/hide在选中或取消选中时运行不正常_Javascript_Jquery_Ajax

Javascript jquery div show/hide在选中或取消选中时运行不正常

javascript jquery ajax

Javascript jquery div show/hide在选中或取消选中时运行不正常,javascript,jquery,ajax,Javascript,Jquery,Ajax,在我的网页中有一个字段，它包含某些元素。因此，如果你检查了以前的手术，那么只有以前的手术元素显示else不会。以下是我的代码的一部分，但它不能正常工作。谁能告诉我吗 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> <script

在我的网页中有一个字段，它包含某些元素。因此，如果你检查了以前的手术，那么只有以前的手术元素显示else不会。以下是我的代码的一部分，但它不能正常工作。谁能告诉我吗

<!DOCTYPE html>
<html>
<head>

 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />

 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>



  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script type="text/javascript" src="ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <script>
$(function(){
   $('.toggler').click(function(){
       if (this.checked) {
           $('div#name').slideDown();
       } else {
           $('div#name').slideUp();
       }
   });
})
  </script>
</head>
<body>
<table>
<tr>

                    <td  height="30">
                        <b>Previous Surgery</b>
                    </td>

                    <td>
<input type="checkbox" name="myCB" value="A" class="toggler" checked="checked" />
                    </td>
                </tr>
<div id="name">

<tr><td>Type of Surgery</td><td><input type="text"></td></tr>
<tr><td>Main Reason for surgery</td><td><input type="text"></td></tr>

<tr><td>Year</td><td><input type="text"></td></tr>
<tr><td>Reffered By</td><td><input type="text"></td></tr>
</div>

</table>
</body>
</html>


$（函数（）{
$（'.toggler'）。单击（函数（）{
如果（选中此项）{
$（'div#name'）.slideDown（）；
}否则{
$（'div#name'）.slideUp（）；
}
});
})
既往手术
手术类型
手术的主要原因
年
参考

只需像这样尝试

$(function(){
$('.toggler').click(function(){
   $('div#name').toggle();       
 });
})

试试这个

并尝试将div放在表外，正如我在fiddle中提到的，原因是HTML无效。 Div不能直接作为

表的子级

修复您的HTML：-

<table>
    <tr>
        <td height="30"> <b>Previous Surgery</b>

        </td>
        <td>
            <input type="checkbox" name="myCB" value="A" class="toggler" checked="checked" />
        </td>
    </tr>
</table>
<div id="name">
    <table>
        <tr>
            <td>Type of Surgery</td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>Main Reason for surgery</td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>Year</td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>Reffered By</td>
            <td>
                <input type="text">
            </td>
        </tr>
    </table>
</div>

如果您的元素有id，则单独使用它，因为它应该是唯一的，并且在性能上成本效益较低

从

对于id选择器，jQuery使用JavaScript函数document.getElementById（），这非常高效。当另一个选择器附加到id选择器（如h2#pageTitle）时，jQuery会在将元素标识为匹配之前执行额外的检查

所以

#name

比

div#name

好

感谢@Ian

您的

tr

s之间不能有

。在

div

之前关闭表格，然后重新打开：

<table>
    <tr>
        <td height="30">
            <b>Previous Surgery</b>
        </td>
        <td>
            <input type="checkbox" name="myCB" value="A" class="toggler" checked="checked" />
        </td>
    </tr>
</table>


<div id="name">
    <table>
        <tr><td>Type of Surgery</td><td><input type="text"></td></tr>
        <tr><td>Main Reason for surgery</td><td><input type="text"></td></tr>
        <tr><td>Year</td><td><input type="text"></td></tr>
        <tr><td>Reffered By</td><td><input type="text"></td></tr>
    </table>
</div>


既往手术
手术类型
手术的主要原因
年
参考

您的div元素放置错误。请将该div放置在正确的位置，然后滑动和向下滑动方法应该可以工作。

您的

tr

之间不能有

。您可以在对齐的基础上工作。这里有一个更好的

input

元素在HTML5中不需要关闭，因此不存在有效性问题。另外，您不应该建议使用

div#name

选择器，因为

div

部分创建的工作比jQuery查找元素所需的工作要多。谢谢@Ian我不知道HTML5的自动关闭功能。但是那些不支持它们的浏览器呢？但是regd输入标签有一个扩展，它是tru，因为它们不能包含任何其他内容。如果你不介意的话，我还有一个问题，但它与这个问题无关。我已经发布了一个问题，但直到现在我还没有得到任何答案。我的页面在google chrome和IE中不起作用。你能检查一下itlet us@javaL吗？看到了，我已经放了ans

<table>
    <tr>
        <td height="30">
            <b>Previous Surgery</b>
        </td>
        <td>
            <input type="checkbox" name="myCB" value="A" class="toggler" checked="checked" />
        </td>
    </tr>
</table>


<div id="name">
    <table>
        <tr><td>Type of Surgery</td><td><input type="text"></td></tr>
        <tr><td>Main Reason for surgery</td><td><input type="text"></td></tr>
        <tr><td>Year</td><td><input type="text"></td></tr>
        <tr><td>Reffered By</td><td><input type="text"></td></tr>
    </table>
</div>