jQuery-基于单选单击更改标签文本

如何解决jQuery-基于单选单击更改标签文本

| 我想知道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>

    

解决方法

如下图所示：

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

    ,

$(\':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。     ,对于您的代码：

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

这样会将标签更改为您在“ 4”属性中添加的标签。为了获得更好的结果，我将在单选按钮上使用类名称，并在要更改的标签上使用ID。 编辑：这是一个工作示例。     ,

<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>