jquery - 单选按钮选中显示 div

Question

我有这个代码：

<div style="padding-bottom:11px;">

<input class="radio" type="radio" value=" join our table" name="Choose:">
<label class="optionLabel"> join our table</label>

</div>

我想要做的是当一个单选按钮被选中以显示一个 div 时，类似于工具提示。

问题是我不知道如何检测单选按钮何时被选中。

欢迎任何建议。谢谢！

Answer 1

要检测单选输入元素上的单击或更改事件并显示div响应：

$('input:radio').click(
    function(e){
        if ($(this).is(':checked')){
            $(selectorForRelevantDivElement).show();
        }
    });

或者：

$('input:radio').change(
    function(e){
        if ($(this).is(':checked')){
            $(selectorForRelevantDivElement).show();
        }
    });

您还可以使用该on()方法，并绑定到无线电输入的祖先元素（这用于将事件处理分配给动态创建的元素）：

$('form').on('change click', 'input:radio', function(e){
        console.log(e.type); // shows the event, whether 'click' or 'change'
        if ($(this).is(':checked')){
            $(selectorForRelevantDivElement).show();
        }
    });

参考：

• change().
• click().
• on().
• show().

Answer 2

您想要 jQuery 更改事件处理程序。像这样的东西：

$(".radio").change(function(e){
    // create your div here
});

Answer 3

您可以将 click 事件用于 radioButton.. 甚至是 Change 事件..

$(function() {
    $('.radio').on('click', function(){
        $('.a').show();        
    });
});​

检查这个更新的小提琴

您可以通过多种方式选择 radioButton

$('.radio').on('click', function(){

$('input[type=radio]').on('click', function(){

动态元素小提琴