Question

我有一个带有输入的引导下拉列表，当我点击li元素时，我想检查输入（无线电或复选框），所以我将下面的点击功能绑定到我的每个li元素上码。当我点击li元素时，会检查相关输入，但不会直接点击输入。怎么了？

function li_click(this_li) {
  console.log(this_li.find('input').attr('type'));
  if (this_li.find('input').attr('type') == 'radio') {
    this_li.parent().find('input:checked').prop('checked', false);
    this_li.parent().parent().find('button').text(this_li.find('input').val() + ' ').append($('<span>').addClass('caret'));
    this_li.find('input').prop('checked', true);
  } else {
    event.stopPropagation();
    console.log(this_li.find('input').is(':checked'));
    if (this_li.find('input').is(':checked'))
      this_li.find('input').prop('checked', false);
    else
      this_li.find('input').prop('checked', true);

  }
  (event.preventDefault) ? event.preventDefault(): event.returnValue = false;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<div class="dropdown">
  <button id="dropdown_btn" class="btn btn-default dropdown-toggle" type="button" name="Select" data-toggle="dropdown" aria-expanded="true">Select&nbsp;<span class="caret"></span>
  </button>
  <ul id="dropdown_dd" class="dropdown-menu" role="menu" aria-labelledby="dropdown_btn">
    <li role="presentation" data-toggle="tooltip" title="" onclick="li_click($(this))">
      <a role="menuitem" tabindex="-1" href="#">
        <input class="myinput" id="g_0" type="radio" value="MASTER"><span>MASTER</span>
      </a>
    </li>
    <li role="presentation" data-toggle="tooltip" title="" onclick="li_click($(this))">
      <a role="menuitem" tabindex="-1" href="#">
        <input class="myinput" id="g_1" type="radio" value="SLAVE"><span>SLAVE</span>
      </a>
    </li>
  </ul>
</div>

Answer 1

(event.preventDefault) ? event.preventDefault() : event.returnValue = false;是您代码中的问题。如果您真的想要包含该行，可以在检查输入之前添加0ms延迟来解决它：

setTimeout(function(){
    this_li.find('input').prop('checked', true);
}, 0);

但是，我认为你最好重写你的jQuery。而不是使用onClick，你应该绑定元素。

setTimeout(f,0)工作的

Here's a jsFiddle。
Here's one其中jQuery被重写为更“标准”的imp

Answer 2

这是一个干净版本，甚至没有使用javascript

label - 标签可以解决这个问题

<强>已更新

JS设置DropDown文本

＆＃13;

$(function(){
    $('input').click(function(){
        $('#dropdown_btn').text($(this).val());
    });
});

＆＃13;

<style>
label { font-weight: normal !important; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<div class="dropdown">
  <button id="dropdown_btn" class="btn btn-default dropdown-toggle" type="button" name="Select" data-toggle="dropdown" aria-expanded="true">Select&nbsp;<span class="caret"></span>
  </button>
  <ul id="dropdown_dd" class="dropdown-menu" role="menu" aria-labelledby="dropdown_btn">
    <li role="presentation" data-toggle="tooltip" title="">
      <a role="menuitem" tabindex="-1" href="#">
        <input class="myinput" id="g_0" type="checkbox" value="MASTER"><label for="g_0">MASTER</label>
      </a>
    </li>
    <li role="presentation" data-toggle="tooltip" title="">
      <a role="menuitem" tabindex="-1" href="#">
        <input class="myinput" id="g_1" type="checkbox" value="SLAVE"><label for="g_1">SLAVE</label>
      </a>
    </li>
<li role="presentation" data-toggle="tooltip" title="">
      <a role="menuitem" tabindex="-1" href="#">
        <input class="myinput" id="g_2" name="uniqueName" type="radio" value="MASTER"><label for="g_2">MASTER 2</label>
      </a>
    </li>
    <li role="presentation" data-toggle="tooltip" title="">
      <a role="menuitem" tabindex="-1" href="#">
        <input class="myinput" id="g_3" name="uniqueName" type="radio" value="SLAVE"><label for="g_3">SLAVE 2</label>
      </a>
    </li>
  </ul>
</div>

＆＃13;

Answer 3

如果您给收音机输入相同的名称，那么您可以避免使用内联onclick =＆＃34;＆＃34; s

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<div class="dropdown">
<button id="dropdown_btn" class="btn btn-default dropdown-toggle" type="button" name="Select" data-toggle="dropdown" aria-expanded="true">Select&nbsp;<span class="caret"></span></button>
<ul id="dropdown_dd" class="dropdown-menu" role="menu" aria-labelledby="dropdown_btn">
    <li role="presentation" data-toggle="tooltip" title=""><a role="menuitem" tabindex="-1" href="#"><input class="myinput" id="g_0" type="radio" value="MASTER" name="same"><span>MASTER</span></a></li>
    <li role="presentation" data-toggle="tooltip" title=""><a role="menuitem" tabindex="-1" href="#"><input class="myinput" id="g_1" type="radio" value="SLAVE" name="same"><span>SLAVE</span></a></li>
</ul>

<script>
$("#dropdown_dd li span").bind("click", function() {
    $(this).prev().click();
});
</script>

带输入的下拉引导 - 在<li>上绑定点击功能，无法检查输入

3 个答案: