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

Question

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

不知何故，代码不起作用。我正在使用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>

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

甚至不容易只是有一个 “结果” 格？

像这样的事情

编辑：为了显示“A”为默认或者你只是把“一”的结果DIV，也许负载你得到的文本（在这种情况下，你没有使用在代码段选择为每编辑的单选按钮选项的值）

$('#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()); 
 
    \t $('#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>