0 
        <script type="text/javascript">
            function toggleDiv()
            {
                if (document.getElementById("searchByRegn_ChkBox").checked)
                {
                        $("#showHideDiv2").show();
                          $('#showHideDiv').hide();
                }
                else
                {
                 $('#showHideDiv2').hide();
                   $('#showHideDiv').show();

                }
            }

        </script>


<tr class="TextDarkBlueBOLD">
                        <td  width="20%" align="left">
                            <input type="checkbox"  id="searchByRegn_ChkBox" checked onclick="toggleDiv(); "/>
                            Custom Search
                        </td>
                        <td valign="top">

                        </td>
</tr>
                  <div id="showHideDiv">   <tr class="TextDarkBlueBOLD">
                        <td  width="20%">
                           Regn. No :
                        </td>
                        <td  align="left">
                            <input type="text" id="rNo" name="regPreSerailNumber" size="15" maxlength="50" onkeypress="return numbersonly(this, event)">
                        </td>
                    </tr></div>
                    <div id="showHideDiv2">
                            <tr>
                              <td class=PageHeader14 colspan="2" align="center">Enrolment Search</td>
                            </tr>
                   </div>

当复选框将被选中时，我想隐藏 div showHideDiv 并显示 div showHideDiv2，如果未选中，那么我想显示 div showHideDiv 并隐藏 div showHideDiv2。但它不工作

4

4 回答 4

2

尝试这个，

 $('#searchByRegn_ChkBox').click(function(){
    if (this.checked){
      $('#showHideDiv2').show();
      $('#showHideDiv').hide();
      // other stuff..............
于 2013-02-19T07:45:17.823 回答
0

我在您的代码中看不到任何本质上的损坏，除非您未能包含 jQuery，在这种情况下，每当您单击时，浏览器的控制台中都会出现错误。

也就是说，您应该避免使用 DOM0 内联事件处理程序。他们要求注册的处理程序是一个全局变量（坏的），并且不支持正确的 DOM3 事件处理程序可以做的很多好事情（例如冒泡与捕获）。

当您使用 jQuery 时，您也可以使用它来注册事件处理程序，这样可以更轻松地测试复选框。您还需要确保将代码包装在document.ready处理程序中，该处理程序应该为您提供完整的必需代码：

$(function() {   // shorthand for document.ready
    $('#searchByRegn_ChkBox').on('click', function() {
        var state = this.checked;
        $('#showHideDiv2').toggle(state);
        $('#showHideDiv').toggle(!state);
    });
});

请注意根据提供的参数使用a或 a的Boolean版本。.toggle.show.hide

请参阅http://jsfiddle.net/alnitak/5L4PF/ NB - 我也更改了 HTML，因为您非法混合了<tr>和<div>元素。

于 2013-02-19T07:49:36.107 回答
0

试试这个使用长度:checked：

if jquery lib is used then this way:

if ($(':checked').length > 0){

  ........all other stuff....

或使用 javascript：

function toggleDiv(){
    if (document.getElementById("searchByRegn_ChkBox").checked){
         document.getElementById("showHideDiv2").style.display='block';
         document.getElementById("showHideDiv").style.display = 'none';
    }else{
         document.getElementById("showHideDiv2").style.display='none';
         document.getElementById("showHideDiv").style.display = 'block';
    }
}
于 2013-02-19T07:43:32.547 回答
0

您可能需要从表格布局中删除 div 以获得所需的结果。您可以使用 change() 选择器在复选框更改时触发。

jsFiddle - http://jsfiddle.net/Zye8f/1/

jQuery部分：

$(document).ready(function() {
    $('#searchByRegn_ChkBox').change(function() {
        $('#showHideDiv').toggle();
        $('#showHideDiv2').toggle();
    });
});

和更新的html

<input type="checkbox"  id="searchByRegn_ChkBox" checked onclick="toggleDiv(); "/>Custom Search
<div id="showHideDiv2">&nbsp;</div>
<div id="showHideDiv">Regn. No :
    <input type="text" id="rNo" name="regPreSerailNumber" size="15" maxlength="50" onkeypress="return numbersonly(this, event)" />
</div>
于 2013-02-19T07:57:55.260 回答