单选按钮选中显示 div答案

【问题标题】：radio button checked show div单选按钮选中显示 div
【发布时间】：2012-09-05 17:17:39
【问题描述】：

我有这个代码：

<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 时，类似于工具提示。

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

欢迎提出任何建议。谢谢！

【问题讨论】：

标签： jquery jquery-selectors radio-button html-input

【解决方案1】：

你可以使用单选按钮的点击事件。甚至是更改事件。

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

检查这个UPDATED FIDDLE

您可以通过多种方式选择单选按钮

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

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

DYNAMIC ELEMENT FIDDLE

【讨论】：

谢谢！但是我怎么能更具体，因为我有 3 个单选按钮，我只想在单击特定单选按钮时显示该 div
谢谢，但我的输入是动态生成的，如下所示：<input <?php if( $key == 0 ){ echo "checked='checked'"; } ?> class="radio" type="radio" value="<?php echo $wpcpup_answer; ?>" name="<?php echo $wpcpup_input['label']; ?>">
如果单选按钮添加到页面后，您需要添加事件处理程序
假设您在单击按钮时添加了 radio4。因此，一旦添加它，您只需执行此操作 $('#radio4').on('click', function(){ // 你的代码在这里 })

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

要检测单选输入元素上的点击或更改事件并显示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();
        }
    });

参考资料：

【讨论】：

谢谢！由于我有 3 个单选按钮，如何仅在特定单选按钮上显示 div
如果没有关于您的页面的更多信息，恐怕很难猜到。虽然稍后我会发布一些建议，但如果我有时间的话，如果这会有所帮助。