jQuery：按类更新特定单选按钮时的span标签？

问题描述：

如何在选择特定单选按钮时更新tag class =“able”？jQuery：按类更新特定单选按钮时的span标签？

步骤：页面打开span class能够清除。每当选择radio1，radio2或radio3时：如果选择了radio1，span class =“able”将更新为输入host1的值。如果选择radio2，span class =“able”将更新为输入host2的值。如果选择radio3，span class =“able”将更新为输入host3的值。

谢谢，提前！

<html lang="en"> 
    <head> 
    <meta charset="UTF-8" /> 
    <title>jQuery Update span by radio button selection</title> 
    <link rel="stylesheet" href="themes/base/jquery.ui.all.css"> 
    <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> 
    <script src="js/jquery-1.6.2.min.js"></script> 
    <script src="ui/jquery.ui.core.js"></script> 
    <script src="ui/jquery.ui.datepicker.js"></script> 
    <script> 

    </script> 
    </head> 
    <body> 

    <div> 
    <input type="text" id="host1" value="Able"> 
    <input type="text" id="host2" value="Baker"> 
    <input type="text" id="host3" value="Charlie"><br> 

    <label><input type="radio" name="radiogroup" value="yes" id="radio1" />Yes</label> 
    <label><input type="radio" name="radiogroup" value="no" id="radio2" />No</label> 
    <label><input type="radio" name="radiogroup" value="maybe" id="radio3" />Maybe</label> 
    <br> 

    </div> 

    <span id="result1" class="able"> </span><br> 
    <span id="result2" class="able"> </span><br> 
    <span id="result3" class="able"> </span> 


    </body> 
    </html>

答

您可能希望将点击事件添加到您的单选按钮，onclick会更改跨度的值。

喜欢的东西：

$('#radio1').click(function(){$('span.able').html($('#host1').val());});

你也可以把它更为常见：

$('input:radio').live('click',function(){ 
    var jThis = $(this), jText = $('#'+jThis.attr('text_id')); 
    $('span.able').html(jText.val()); 
});

您将需要一个属性“text_id”添加到单选按钮，以确定应该使用哪个文本对于给定的单选按钮。

答

试试这个

$('input:radio').click(function(){ 

    var id = this.id.replace('radio', ''); 
    $('#result' + id).text($('#host' + id).val()); 

});

工作Demo

jQuery：按类更新特定单选按钮时的span标签？

相关推荐