使用 javascript 基于单选按钮切换搜索栏

Question

所以我有 html down pact（我认为），因为它确实通过两个按钮显示并且可以轻松点击它们：

<form>
  <input type="radio" name=searchOption value="one" > One Search
  <input type="radio" name=searchOption value="two" > Two Search<br>
  <onClick="changeScope(one)>
</form>

我正在使用宏，所以我在 Confluence 页面本身（oneSearch、twoSearch）中设置了 div id。我也有 twoSearch style = display:none

我的页面显示 oneSearch 但不是我想要的两个。我认为我的 JavaScript 不会导致搜索栏切换。

这是我的 JavaScript:

<script type="text/javascript">
function changeScope() {
    document.getElementById('oneSearch').style.display = "none";
}
</script>

Answer 1

如果我没理解错的话，您想将搜索栏绑定到单选按钮并显示它。

document.getElementById("cat").addEventListener('click', function(){
  document.getElementById("oneSearch").style.display = "block"
  document.getElementById("twoSearch").style.display = "none"  

});

document.getElementById("dog").addEventListener('click', function(){
  document.getElementById("oneSearch").style.display = "none"
  document.getElementById("twoSearch").style.display = "block"  

});

#oneSearch, #twoSearch{
   display: none;
  }

<input id="cat" type="radio" name="animal" value="cat">
<label>Cat</label><br>
<input id="dog" type="radio" name="animal" value="dog">
<label>Dog</label><br>
<input type="text" id="oneSearch" placeholder="cat search"><br>
<input type="text" id="twoSearch" placeholder="dog search">

Answer 2

我从未使用过 Confluence。但是在标准 JavaScript 中，像这样的东西应该可以工作。

<form>
  <input type="radio" name=searchOption value="one" onclick="changeScope('oneSearch','twoSearch');"> One Search
  <input type="radio" name=searchOption value="two" onclick="changeScope('twoSearch','oneSearch');" > Two Search<br>
</form>

<script type="text/javascript">
function changeScope(elemToShow,elemToHide) {
    document.getElementById(elemToShow).style.display = "block";
    document.getElementById(elemToHide).style.display = "none";
}
</script>

使用 javascript 基于单选按钮切换搜索栏

Switching search bar based on radio button using javascript

html

javascript

confluence