jQuery-根據單選單擊更改標簽文本

Question

我想知道jQuery是否可以根據單擊的單選按鈕來更改頁面上的文本。

我有以下代碼，並且我想根據單擊的單選按鈕將標簽文本更改為“單擊了第一個單選”或“單擊了第二個單選”。

<input type="radio" name="first" value="yes" id="firstradio">
<input type="radio" name="first" value="no" id="secondradio"> 

<label class="changeme">Initial text goes here and is happy</label>

Answer 1

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

   var index = $(this).index(),
       // Modify this to suit all ordinals
       ordinal = (index == 0) ? 'first' : 'second';    

   $('.changeme').text(ordinal + ' radio was clicked');

});

jsFiddle 。

Answer 2

對於您的代碼：

$('input[type=radio]').change(function(evt) {
    $('.changeme').html($(this).val());
});

這樣會將標簽更改為您在該value屬性中放置的任何內容。 為了獲得更好的結果，我將在單選按鈕上使用類名稱，並在要更改的標簽上使用ID。

編輯：這是一個有效的示例 。

Answer 3

如下圖所示：

$('input[name=first]').change(function()  {
    // change the page per this logic
    switch ($('input[name=first]:checked').val()) {
        case 'yes':
            $('#Message').text('first radio was clicked'); break;
        case 'no':
            $('#Message').text('second radio was clicked'); break;
        default:
            $('#Message').text('select choice');
};

Answer 4

<asp:RadioButtonList ID="rbtnType" runat="server" RepeatDirection="Vertical">
<asp:ListItem Value="C">Contract </asp:ListItem> <asp:ListItem Value="I">Independent</asp:ListItem> 
<asp:ListItem Value="O">OutSource </asp:ListItem> </asp:RadioButtonList>  <br />
 <asp:Label ID="lblLaborType" runat="server" ></asp:Label>  
<script type="text/javascript">
   $(document).ready(function ()     
     {   
      $("#<%=rbtnType.ClientID%>").change(function () 
    {    
      var rbvalue = $("input[@name=<%=rbtnType.ClientID%>]:radio:checked").val();   
        if (rbvalue == "C")
      {        
            $('#<%=lblLaborType.ClientID %>').html('Do this');  
   } 
      else if (rbvalue == "I")
   {         
      $('#<%=lblLaborType.ClientID %>').html('else this'); 
    }

    else if (rbvalue == "O") 
     {
           $('#<%=lblLaborType.ClientID %>').html('or else this');        
    }
    }); 
    }); 
   </script>