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

目的の結果を得るには、テーブル レイアウトから 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 に答える
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

jQuery を含めなかった場合を除き、コードに本質的に壊れているものは見当たりません。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 - 要素<tr>と要素 が違法に混在していたため、HTML も変更しました<div>。

于 2013-02-19T07:49:36.107 に答える