Question

我正在使用Razor视图引擎使用此代码生成RadioButton项目列表，我的css和Javascript是

    .radioSelection
{
    color: Green;
    font-weight: bold;        
}
 $(document).ready(function () {         
     $("input[name=ScoreId]:radio").change(function () {   
        //How can i access the label span of current selection & reset the old selection         
     });
 });

@foreach (var item in model)
{
  <li class="radio clearfix ui-sortable-handle">     
     @Html.RadioButton("ScoreId", statement_item.Id, new { @class = "" })
    <span class="lbl" >@statement_item.Statement</span>
  </li>
}

如何将class radioSelection设置为选定的radiobuttonList项目另外，当选择新的广播项目时，如何将旧项目的选择重置为正常

Answer 1

使用.next()函数获取所需的下一个元素span

$("input[name=ScoreId]:radio").change(function () { 

    $(':radio:checked').not(this).prop('checked',false)
    $('li.radioSelection').removeClass('radioSelection'); //Reset selection

    $(this).closest('li').addClass('radioSelection');   //Add class to list item

    $(this).next('span')         //Access span
});

Answer 2

尝试使用 - $(this).siblings('span.lbl')。

Answer 3

试试这个：

 $(document).ready(function () {         
  $("input[name=ScoreId]:radio").change(function () {   

  $(this).prop('checked', false); }) // make check only selected radio button and uncheck others

  $('input:radio[name=ScoreId]').each(function () {         
     $(this).removeClass('className'); })   // remove the class from all radio buttons         
  }    

  $("input:radio[name=ScoreId]:checked").closest('li').addClass('radioSelection');  // add class only to selected radio button  

  $(input:radio[name=ScoreId]:checked).next('span');         // Access span of selected radio
    });
 });

选择时更改单选按钮项类

3 个答案: