復選框以顯示更多選項

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

將$('moreOptions')更改$('moreOptions') $('#moreOptions')

Answer 3

如果您不使用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/