1

ドロップダウンリストとボタンをHTMLで表示/非表示にしようとしていますが、機能させるのに問題があります。これがHTMLの設定です。

<td valign="top">
    <INPUT TYPE="CHECKBOX" NAME="switchBox" onClick="showHideForm(this,'extra')"> 
</td>
<div id="extra">
   <td valign="top"><form:select path="uSelectedSystemId" id="uSelectedSystemId"></form:select> </td>
   <td valign="top"><button type="button" id="fUndelete">Undelete</button</td>
</div>

これは関数です：

function showHideForm(box, id) {
    var elm = document.getElementById(id);
    elm.style.display = box.checked ? $('#uSelectedSystemId').hide() : $('#uSelectedSystemId').show();
    elm.style.display = box.checked ? $('#fUndelete').hide() : $('#fUndelete').show();
}

チェックボックスをオンにしても何も起こりません。何が間違っているのかについてのアイデアはありますか？また、ページが表示されている時点でページが最初に読み込まれたときにドロップダウンとボタンを非表示にする方法についての提案はありますか（非表示にしたい）。

4

3 に答える 3

7

そこにjQueryとjavascriptのランダムな組み合わせのビット。チェックボックスにIDを指定した場合は、次のようにするだけです。

$(function(){

    $('#uSelectedSystemId').hide();  //Hide the elements onload
    $('#fUndelete').hide();          //Hide the elements onload

    $('#checkboxID').click(function(){
          if($(this).is(':checked')){
              $('#uSelectedSystemId').show();
              $('#fUndelete').show();
          } else {
              $('#uSelectedSystemId').hide();
              $('#fUndelete').hide();
          }
    });
});

何らかの理由でチェックボックスにIDを付けたくない場合は、行$('#checkboxID')をこれに変更できます。$('input[name="switchBox"]')

以下は関数の作り直しです。これにより、余分なIDを持つDIVが非表示および表示されます。上記のコードはdivを非表示にしませんが、内部の2つの要素を非表示にします。これは簡単に調整できますが

//Pure javascript version
function showHideForm(box, id) {
    var elm = document.getElementById(id);
    if(box.checked){
        elm.style.display = "none";
    } else {
        elm.style.display = "";
    }
}
于 2013-03-12T10:36:53.160 に答える
0

チェックボックスのonchangeイベント時に関数を呼び出す

<INPUT TYPE="CHECKBOX" NAME="switchBox" onchange="showHideForm(this,'extra')">
于 2013-03-12T10:37:23.263 に答える
0

jQueryと純粋なJavaScriptを組み合わせて使用​​しないでください。

<INPUT TYPE="CHECKBOX" NAME="switchBox" style="display:none" onClick="showHideForm()">

物事はこのjQueryのように機能するはずです：

function showHideForm() {
    if($('#checkboxID').is(':checked')){
        $('#uSelectedSystemId').hide();
        $('#fUndelete').hide();
    }else {
              $('#uSelectedSystemId').show();
              $('#fUndelete').show();
    }
}

純粋なjs：

function showHideForm(){
    if(document.getElementById('checkboxID').checked){
        document.getElementById("uSelectedSystemId").style.display="none"
        document.getElementById("fUndelete").style.display="none"
    }else{
        document.getElementById("uSelectedSystemId").style.display="block"
        document.getElementById("fUndelete").style.display="block"
    }
}
于 2013-03-12T10:51:27.707 に答える