如何使用jquery隱藏和顯示來自javascript的div

Question

        <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。 但它不起作用

Answer 1

嘗試這個，

 $('#searchByRegn_ChkBox').click(function(){
    if (this.checked){
      $('#showHideDiv2').show();
      $('#showHideDiv').hide();
      // other stuff..............

Answer 2

嘗試使用以下長度: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';
    }
}

Answer 3

除非你沒有包含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);
    });
});

注意使用的Boolean版.toggle它做了.show或.hide根據所提供的參數。

請參閱http://jsfiddle.net/alnitak/5L4PF/注意 - 我也改變了HTML，因為你有非法混合的<tr>和<div>元素。

Answer 4

您可能需要從表布局中刪除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>