选择单选按钮时更改字母表

Change alphabet when select radio button

本文关键字：字母表 单选按钮 选择      更新时间：2023-09-26

当我单击其中一个字母表时，将显示选定的字母表，其余字母表应隐藏。

不知何故，代码不起作用。我正在使用jQuery。

$("#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.");
});
<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>

一般来说，

你尝试过$("#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');
});

试试这个

$('.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>

仅仅有一个"结果"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>

相关文章：