Question

我想在单击按钮A或B时切换内容。我写了html

  <h4>SELECT</h4>
  <div>
    <input type="radio">
    <label>A</label>
    <input type="radio">
    <label>B</label>
  </div>

如果要切换内容

<input type="radio">
<label>A</label>

点击

，显示<label>a</label>，如果

<input type="radio">
<label>B</label>

点击

，显示<label>b</label>。我想使用jQuery来做，但是我应该如何编写代码？我对jQuery很陌生，所以请帮助我。

Answer 1

您可以尝试以下逻辑，在其中可以显示单击的单选按钮的下一个标签。

最初隐藏所有标签，并将name =“ switch”置于单选按钮，以便一次选择一次

$(function(){
  $('input:radio[name=switch]').on('click', function(){
      $(this).siblings('label').hide();
      $(this).next('label').show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>SELECT</h4>
  <div>
    <input type="radio" name="switch">
    <label style="display:none">A</label>
    <input type="radio" name="switch">
    <label style="display:none">B</label>
  </div>

Answer 2

您只需单击单选按钮即可更改

$(document).ready(function(){
  $("#radioone").click(function(){
    $(".textone").html("<label>Adana merkez patlıyor herkes!</label>");
  });
  $("#radiotwo").click(function(){
    $(".texttwo").html("<label>Adana merkez patlıyor herkes!</label>");
  })
})

Answer 3

对不起，但我认为我迷失了翻译。您是说要通过单击所选单选按钮的标签来打开它们吗？

“正常”方法是将Label的“ for”属性绑定到单选按钮的ID，例如：

<div>
   <input type="radio" id='radio1'><label for='radio1'>A</label>
   <input type="radio" id='radio2'><label for='radio2'>B</label>
</div>

单击按钮时如何切换内容？

3 个答案: