选择单选按钮时更改字母

Question

当我点击其中一个字母时，将显示所选的一个字母，其余部分应隐藏。

不知何故，代码不起作用。我使用的是jQuery。

＆＃13;

＆＃13;

$("#r-learn-more").click(function() {
  alert("Handler for .click() called.");
});

$("#r-book-viewing").click(function() {
  $("#bb").attr("display", "block");
});

$("#r-closing-price").click(function() {
  alert("Handler for .click() called.");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<div class="fieldset-content">
  <div class="radio">
    <input type="radio" value="one" name="radiogroup1" id="r-learn-more" checked="">
    <label for="r-learn-more">a</label>
  </div>
  <div class="radio">
    <input type="radio" value="two" name="radiogroup1" id="r-book-viewing">
    <label for="r-book-viewing">b</label>
  </div>
  <div class="radio">
    <input type="radio" value="three" name="radiogroup1" id="r-closing-price">
    <label for="r-closing-price">c</label>
  </div>
</div>

<div id="aa" style="display: block;">a</div>
<div id="bb" style="display: none;">b</div>
<div style="display: none;">c</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

一般情况下，您尝试使用$("#bb").attr('display','block')，必须是$("#bb").css("display","block");

也许更好的方法是使用类似的东西：

<div class="fieldset-content">
   <div class="radio">
      <input type="radio" data-show="aa" value="one" name="radiogroup1" id="r-learn-more" checked="">
      <label for="r-learn-more">a</label>
   </div>
   <div class="radio">
      <input type="radio" data-show="bb" value="two" name="radiogroup1" id="r-book-viewing">
      <label for="r-book-viewing">b</label>
   </div>
   <div class="radio">
      <input type="radio" data-show="cc" value="three" name="radiogroup1" id="r-closing-price">
      <label for="r-closing-price">c</label>
   </div>
</div>

<div id="aa" class='item' style="display: block;">a</div>
<div id="bb" class='item' style="display: none;">b</div>
<div id="cc" class='item' style="display: none;">c</div>

和JS

var $items = $('.item');
$(':radio').on('change', function () {
   var $item = $('#' + this.dataset.show);

   $items.not($item).css('display', 'none');
   $item.css('display', 'block');
});

Answer 2

试试这个

$('.radio input').change(function(event){
    $('.alphabet-letter').hide();
    $('#'+$(this).data('id')).show();
}).first().prop('checked', true).trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="fieldset-content">

  <div class="radio">
    <input type="radio" value="one" name="radiogroup1" id="r-learn-more" data-id="aa">
    <label for="r-learn-more">a</label>
  </div>
  <div class="radio">
    <input type="radio" value="two" name="radiogroup1" id="r-book-viewing"  data-id="bb">
    <label for="r-book-viewing">b</label>
  </div>
  <div class="radio">
   <input type="radio" value="three" name="radiogroup1" id="r-closing-price"  data-id="cc">
   <label for="r-closing-price">c</label>
  </div>

</div>

<div id="aa" class="alphabet-letter">
a
</div>

<div id="bb" class="alphabet-letter">
b
</div>

<div id="cc" class="alphabet-letter">
c
</div>

Answer 3

只有一个“结果”div才会更容易？

像这样的东西

编辑：要将“a”显示为默认值，您只需在结果div中输入“a”，或者在加载时，您可以获得所选单选按钮选项的文本（在这种情况下，您不使用该值）根据代码段中的编辑

$('#result').text($('input:radio[name=radiogroup1]:checked').parent().text());
$( ".radio input" ).click(function() {
var label = $("label[for='"+$(this).attr('id')+"']");
  console.log(label);
  console.log(label.html());
 	$('#result').text(label.html());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="fieldset-content">

  <div class="radio">
    <input type="radio" value="one" name="radiogroup1" id="r-learn-more" checked="">
    <label for="r-learn-more">a</label>
  </div>
  <div class="radio">
    <input type="radio" value="two" name="radiogroup1" id="r-book-viewing">
    <label for="r-book-viewing">b</label>
  </div>
  <div class="radio">
   <input type="radio" value="three" name="radiogroup1" id="r-closing-price">
   <label for="r-closing-price">c</label>
  </div>

</div>

<div id="result" style="display: block;">
<!--Alernative to load the text by jquery you could just put here "a"-->
</div>