Question

使用Bootstrap 3.3.6，JQuery 1.11.3

我遇到一个小部分问题，特别是在用户点击该行时选择和取消选中复选框。

jsfiddle here：http://jsfiddle.net/0ogdt9s7/1/

HTML

<div id="not-working">
  <h3>
  Click the text, then click the box
  </h3>
  <div class="selection-row" data-id="20">
    <div class="col-md-5">Data 20</div>
    <div class="col-md-2">
      <input type="checkbox" name="selectedDudes[]" value="20" id="checkbox-20">
    </div>
  </div>
  <div class="selection-row" data-id="22">
    <div class="col-md-5">Data 22</div>
    <div class="col-md-2">
      <input type="checkbox" name="selectedDudes[]" value="22" id="checkbox-22">
    </div>
  </div>
</div>

JS

$(document).ready(function() {

  $(document).on("click", "div.selection-row", function() {
    var $cb = $('input[type="checkbox"]', $(this)), is_on = $cb.prop('checked');
    if (is_on) {
      //if its already checked, uncheck it
      $cb.prop('checked', false);
    } else {
      //if its not checked, check it
      $cb.prop('checked', true);
    }
  });
});

行选择效果很好，但如果单击行内的复选框，则复选框不会更改。单击“数据”将正确更改它，但复选框无效。

需要注意的重要事项：

它必须位于$(document).on()内，因为它位于通过AJAX显示的弹出窗口内。

我认为这是超级简单的东西，但我找不到它。任何帮助表示赞赏。

Answer 1

由于Bubbling phase，您收到了意外的结果。

事件的冒泡阶段会触发从下到上收听事件的所有元素的父母：

在您的情况下，当用户第一次单击该复选框时，它会被选中。然后Blubbling阶段发生并开始搜索正在侦听事件的最近父节点，如果存在，则其处理程序（函数）被执行。你有一个：selection-row。

.selection-row元素的处理程序会恢复复选框的默认行为，因此就像用户没有做任何事情一样。

如果你想要的是当用户点击Data 20或Data 22并且相应的复选框被选中时，你不需要使用javascript。 label元素应该解决：

  <div class="selection-row" data-id="20">
  <div class="col-md-5"><label for="checkbox-20" >Data 20</label></div>
    <div class="col-md-2">
      <input type="checkbox" name="selectedDudes[]" value="20" id="checkbox-20">
    </div>
  </div>
  <div class="selection-row" data-id="22">
  <div class="col-md-5"><label for="checkbox-22">Data 22</label></div>
    <div class="col-md-2">
      <input type="checkbox" name="selectedDudes[]" value="22" id="checkbox-22">
    </div>
  </div>

检查出来：http://jsfiddle.net/0ogdt9s7/2/

正如你所说，你需要整个行是可点击的，你可以检查事件的原始目标（最里面的元素）是否是input并让默认行为通过中断处理程序来完成它的工作return;：

$(document).on("click", "div.selection-row", function(e) {
    if ($(e.target).is('input')) return;

    var $cb = $('input[type="checkbox"]', $(this)), is_on = $cb.prop('checked');
    if (is_on) {
      //if its already checked, uncheck it
      $cb.prop('checked', false);
    } else {
      //if its not checked, check it
      $cb.prop('checked', true);
    }
  });

检查此解决方案：http://jsfiddle.net/0ogdt9s7/6/

Answer 2

Coworker刚刚通过目标检查解决了这个问题：

http://jsfiddle.net/0ogdt9s7/4/

$(document).ready(function() {
  $(document).on("click", ".selection-row", function(e) {
    var $target = $(e.toElement);
    if (!$target.is('input')) {
      console.log($target);
      var $cb = $('input[type="checkbox"]', $(this)),
        is_on = $cb.is(':checked');
      if (is_on) {
        //if its already checked, uncheck it
        $cb.prop('checked', false);
      } else {
        //if its not checked, check it
        $cb.prop('checked', true);
      }
    }
  });
});

请稍等一下，看看是否有更好的解决方案

Answer 3

您可以将您正在收听的元素更改为文本，如下所示：

＆＃13;

$(".selector").click(function() {
  $(this).parent().find(".chkbox").trigger("click");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="not-working">
  <h3>
  Click the text, then click the box
  </h3>
  <div data-id="20">
    <div class="col-md-5 selector">Data 20</div>
    <div class="col-md-2">
      <input class="chkbox" type="checkbox" name="selectedDudes[]" value="20" id="checkbox-20">
    </div>
  </div>
  <div data-id="22">
    <div class="col-md-5 selector">Data 22</div>
    <div class="col-md-2">
      <input class="chkbox" type="checkbox" name="selectedDudes[]" value="22" id="checkbox-22">
    </div>
  </div>
</div>

＆＃13;

Answer 4

好的，这是一个使用bootstrap列表组的简洁例子

$(".list-group-item").click(function(event) {
  var target = $(event.target);
  if (target.is("input")) {
    $(this).trigger(click);
  } else {
    $(this).find(".chkbox").trigger("click");
  }
});

<ul class="list-group">
  <li class="list-group-item">
    <input class="chkbox" type="checkbox"> Porta ac consectetur ac
  </li>
</ul>

DEMO

javascript复选框功能只工作一次

4 个答案: