Question

我有一个从无线电输入标签动态创建的无序列表。单击创建的列表项＆＃39;？

时如何获取选中的单选按钮

列出通过无线电值动态创建的项目。点击其中一个项目

<ul id="listSec">
    <li>Item1 menu </li>
    <li>Item2 menu </li>
    <li>Item3 menu </li>
</ul>

依赖无线电表格。当点击Item3菜单时，Item3收音机必须如此检查。

<form>
    <div id="formForItems">
       <input type="radio" name="items" value="1" checked> Item1 radio <br>
       <input type="radio" name="items" value="2"> Item2 radio  <br>
       <input type="radio" name="items" value="3"> Item3 radio 
    </div>
</form>

如果点击的列表项将一个类激活，那么它也会很棒。

Answer 1

使用事件委派来动态生成li。在点击事件中获取点击的li索引，然后检查相同的索引radio。

$(document).on('click', '#listSec li', function () {
    var index = $(this).index();
    $('#formForItems input:radio').eq(index).prop('checked', true);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul id="listSec">
    <li>Item1 menu </li>
    <li>Item2 menu </li>
    <li>Item3 menu </li>
</ul>

<form>
    <div id="formForItems">
        <input type="radio" name="items" value="1" checked> Item1 radio <br>
        <input type="radio" name="items" value="2"> Item2 radio  <br>
        <input type="radio" name="items" value="3"> Item3 radio
    </div>
</form>

Answer 2

＆＃13;

$(document).on('click', "#listSec li", function(e){
  var index = $("#listSec li").removeClass('active').index(this);
  $(this).addClass('active');
  $('#formForItems input[name="items"]').eq(index).prop('checked', true);
})

＆＃13;

.active{
  color:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul id="listSec">
    <li>Item1 menu </li>
    <li>Item2 menu </li>
    <li>Item3 menu </li>
</ul>
Depended radio form. when clicked Item3 menu, Item3 radio must checked so on.

<form>
    <div id="formForItems">
       <input type="radio" name="items" value="1" checked> Item1 radio <br>
       <input type="radio" name="items" value="2"> Item2 radio  <br>
       <input type="radio" name="items" value="3"> Item3 radio 
    </div>
</form>

＆＃13;

Answer 3

我会写这样的东西：

    $(document).on("click","#listSec > li",function(){
      //remove active class from all the inputs
      $("#formForItems > input").removeClass("active");

      //get index of clicked element
      var index = $("#listSec > li").index(this);

      //check the corresponding radio and add "active" class
      $("#formForItems > input").eq(index).prop("checked",true).addClass("active");
    });

请参阅here

单击列表项时Jquery如何获取选中的单选按钮？

3 个答案: