Question

我试图找到一种方法，了解如何在单击单选按钮时显示特定列表。我是HTML / JS的新手，看过DOM操作，但不知道我做错了什么，因为无论我定义了什么条件，我的代码都会进入下一个列表。

所以我的HTML看起来像这样：

<li>
    radio button 1
    radio button 2
</li>

<li id="Li1">
    show some text when radio button 1 is clicked
</li>

<li id="Li2">
    show some text when radio button 2 is clicked
</li>

我的JS代码：

function check() {
    if(radio button 1 is selected)
       jump to list 1;
}
function check() {
    if(radio button 2 is selected)
       jump to list 2;
}

我在我的函数中使用document.getElementById()尝试跳转到特定列表，但它不起作用。

我不知道我在这里错过了什么。任何建议都会非常有用。

Answer 1

这是一个例子 https://codepen.io/neolivz/pen/ELoaEQ

基本上创建2个带有唯一ID的单选按钮

<input type='radio' name='rad' id='rad1' />
<label for='rad1'>Radio 1</label>
<input type='radio' name='rad' id='rad2' />
<label for='rad1'>Radio 2</label>

并创建相应的内容div

<ul>
  <li id='radio1' style="display:none">Radio 1</li>
  <li id='radio2' style="display:none">Radio 2</li>
</ul>

并在javascript部分创建showAndHide函数

function showHide(e){
  if(e.target.id === 'rad1'){
    document.getElementById('radio1').style.display = 'inherit'
    document.getElementById('radio2').style.display = 'none'
  } else {
    document.getElementById('radio2').style.display = 'inherit'
    document.getElementById('radio1').style.display = 'none'
  }
}

并收听点击事件

window.onload = function() {  
  document.getElementById('rad1').addEventListener("click",showHide)
  document.getElementById('rad2').addEventListener("click",showHide)
};

注意：这是一个基本的例子。我建议您阅读query selectors和data-属性以获得更有说服力的解决方案

Answer 2

您可以使用scrollIntoView“跳转”。

function myFunction(navigateTo) {
  var element = document.getElementById(navigateTo);
  element.scrollIntoView();
}

#container {
  height: 500px;
  overflow: scroll;
}

<div id="container">
  <ul>
    <li>
      <label><input type="radio" onclick="myFunction('li1')" />Text1</label>
      <label><input type="radio" onclick="myFunction('li2')" />Text2</label>
      <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </li>
    <li id="li1">
      show some text when radio button 1 is clicked
      <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </li>
    <li id="li2">
      show some text when radio button 2 is clicked
    </li>
  </ul>
  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>

Answer 3

您可以尝试以下方式：

＆＃13;

function check() {
  var ck = document.querySelectorAll('[type=radio]');
  ck.forEach(function(el){
    if(el.checked)
      document.querySelector('#'+el.value).style.display = 'block';
    else
      document.querySelector('#'+el.value).style.display = 'none';
  });
     
}

＆＃13;

ul li{
  display: none;
}

＆＃13;

<input type="radio" name="list" value="l1" onclick="check()"> List 1<br>
<input type="radio" name="list" value="l2" onclick="check()"> List 2<br>
<ul>
  <li id="l1">
      show some text when radio button 1 is clicked
  </li>

  <li id="l2">
      show some text when radio button 2 is clicked
  </li>
</ul>

＆＃13;

Answer 4

下面的代码可能对您有所帮助.. 1.创建具有相同名称和放大器的单选按钮。不同的身份 2.根据选中的单选按钮启用列表

`<!DOCTYPE html>
<html>
<script>
function showList(){
if(document.getElementById("r1").checked == true){
    document.getElementById("li1").style.display = 'block';
    document.getElementById("li2").style.display = 'none';
} else {
    document.getElementById("li2").style.display = 'block';
    document.getElementById("li1").style.display = 'none';
}
}
</script>
<body>
    <input type="radio" id="r1" name="showList" value="list1" onclick=showList()>Show List1<br>
    <input type="radio" id="r2" name="showList" value="list2" onclick=showList()>Show List2<br>
    <li id="li1" style="display:none">
        show some text when radio button 1 is clicked
    </li>
    <li id="li2" style="display:none">
        show some text when radio button 2 is clicked
    </li>
</body>
</html>`

Answer 5

我找不到相关的非jQuery副本，所以这里是我可以生成的通用代码。

这是不显眼的，您可以根据需要添加任意数量的匹配的无线电/ LI对，如果页面加载时有一个已检查的无线电，它将显示

＆＃13;

function toggleLI() {
  var rad = document.querySelector(".rad:checked"), // the checked radio
    index = +rad.getAttribute("data-index"), // numeric index
    visibleLI = document.querySelector(".toggle.active"), // visible LIs
    liToBeShown = document.querySelectorAll(".toggle")[index];

  if (visibleLI) { // there may be none visible yet
    visibleLI.style.display = "none"; // hide
    visibleLI.classList.remove("active");
  }
  liToBeShown.style.display = "block"; // show
  liToBeShown.classList.add("active");
}

function myLoad() {
  var rads = document.querySelectorAll(".rad");
  for (var i = 0; i < rads.length; i++) {
    rads[i].onclick = toggleLI;
    rads[i].setAttribute("data-index", i); // for faster access
  }
  toggleLI(); // initialise
}

// onload
if (window.addEventListener) {
  window.addEventListener('load', myLoad)
} else {
  window.attachEvent('onload', myLoad)
}

＆＃13;

.toggle {
  display: none
}

＆＃13;

<ul>
  <li>
    <label><input type="radio" name="texts" class="rad" checked />Show Text1</label>
    <label><input type="radio" name="texts" class="rad" />Show Text2</label>
  </li>
  <li class="toggle">
    show some text when radio button 1 is clicked
  </li>
  <li class="toggle">
    show some text when radio button 2 is clicked
  </li>
</ul>

＆＃13;

单击单选按钮时，在HTML中运行特定标记

5 个答案: