javascript - その他のオプションを表示するためのチェックボックス

Question

ColdFusion 8 を使用して検索フォームを作成していますが、高度な検索オプションを表示する場合は、ユーザーがチェックボックスをオンにできるようにしたいと考えています。

これが私がこれまでに持っているものです：

私のjavascriptファイルで：

function showDiv(advancedVal)
{  
  if(advancedVal == '') {
    $('moreOptions').style.display = "";
  } else {
    $('moreOptions').style.display = "none";
  }
}

私のCFファイルでは：

<input name="advanced" type="checkbox" value="" id="advanced" onclick="showDiv('');">


<div id="moreOptions" style="display:none;" class="moreOptions">
<table>
drop down boxes
</table>
</div>

チェックボックスは別の表にありますが、これは問題ですか?

これが機能しない理由を知っている人はいますか？

Answer 1

jQueryを使用していますか？次に、次のようになります。

$('moreOptions').style.display = ""する必要があります$('#moreOptions').show()

また

$('moreOptions')[0].style.display = ""

UPD

これがあなたが望むものだと思います：

function showDiv(obj) {
    var more = document.getElementById('moreOptions');
    more.style.display = obj.checked ? "" : "none";
}​

マークアップを変更します。

<input name="advanced" type="checkbox" value="" id="advanced" onchange="showDiv(this)">

デモを見るhttp://jsfiddle.net/dfsq/Kexbu/2/

Answer 2

jQuery を使用していない場合、コードは次のようになります。

function showDiv(advancedVal)
{  
  if(advancedVal) {
    document.getElementById('moreOptions').style.display = "";
  } else {
    document.getElementById('moreOptions').style.display = "none";
  }
}

と

<input name="advanced" type="checkbox" value="" id="advanced" onchange="showDiv(this.checked)">

例を次に示します: http://jsfiddle.net/XN8aK/1/

Answer 3

$('moreOptions')に変更$('#moreOptions')