复选框不起作用，但标签起作用答案

【问题标题】：Checkbox doesn't work, but the label does复选框不起作用，但标签起作用
【发布时间】：2017-06-20 08:05:55
【问题描述】：

我有一个标签和一个复选框。当我单击标签时，会发生所需的操作。当我单击启用或禁用时，该复选框什么都不做。我已经在输入内部和外部移动了标签，但似乎没有任何效果。所有代码如下。

home_filters.html.erb：

<span id="listing-search-sentence-transit" style="display: none;">I'd like to live near <a tabindex="0" class="button btn-transparent" id="listing-transit-selector" role="button" data-toggle="popover">these trains.</a></span>
<span id="listing-search-sentence-fee" style="display: none;">Only find me <a tabindex="0" class="button btn-transparent" id="listing-no-fee-selector" role="button" <%= f.check_box :no_fee %> <%= f.label :no_fee, "no fee listings." %> </a></span>
<span id="listing-search-sentence-pets" style="display: none;"> <a tabindex="0" class="button btn-transparent" id="listing-pets-selector" role="button" data-toggle="popover"><%= f.label :pets %></a></span>


<div id="test-content" class="hide">
  <div class="container-fluid">
    <label id="label-sentence-fee" class="general-text-label" for="sentence-fee"><input type="checkbox" name="label-sentence-fee" id="sentence-fee"> No Fee Listing</label><br>
    <label id="label-sentence-transit" class="general-text-label" for="sentence-transit"><input type="checkbox" name="label-sentence-transit" id="sentence-transit"> Transit</label><br>
    <label id="label-sentence-pets" class="general-text-label" for="sentence-pets"><input type="checkbox" name="label-sentence-pets" id="sentence-pets"> Pets</label><br>
  </div>
</div>

.js 文件：

$("#sentence-fee").click(function(feeEvent){
  feeEvent.stopPropagation();
  $("#listing-search-sentence-fee").toggle();
  $("input#sentence-fee").prop('checked', true);
});

$("#sentence-transit").click(function(transitEvent){
  transitEvent.stopPropagation();
  $("#listing-search-sentence-transit").toggle();
  $("input#sentence-transit").prop('checked', true);
});

$("#sentence-pets").click(function(petsEvent){
  petsEvent.stopPropagation();
  $("#listing-search-sentence-pets").toggle();
  $("input#sentence-pets").prop('checked', true);
});

【问题讨论】：

$("input#sentence-fee").prop('checked', true); 你为什么要这样做？你想在点击时一直检查输入吗？
@demo 我没有。仅当用户选中该框时。
如果你删除这行$("input#sentence-fee").prop('checked', true); 是不是要你expext？当用户单击复选框时 - 它被选中。第二次 - 它未选中。像这样的东西jsfiddle.net/xk9toseq
@demo 正确。截至目前，复选框就在那里，什么也不做。因此，如果我单击复选框，则应出现所需的操作。在第二次单击时，所需的操作将消失。我删除了那条线，它什么也没做。
Desired Action - 您的意思是切换#listing-search-sentence-pets 元素吗？

标签： jquery ruby-on-rails checkbox label

【解决方案1】：

如果您有类似以下示例的代码，应该适合您：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id="listing-search-sentence-transit" style="display: none;">I'd like to live near <a tabindex="0" class="button btn-transparent" id="listing-transit-selector" role="button" data-toggle="popover">these trains.</a></span>
<span id="listing-search-sentence-fee" style="display: none;">Only find me <a tabindex="0" class="button btn-transparent" id="listing-no-fee-selector" role="button" <%= f.check_box :no_fee %> <%= f.label :no_fee, "no fee listings." %> </a></span>
<span id="listing-search-sentence-pets" style="display: none;"> <a tabindex="0" class="button btn-transparent" id="listing-pets-selector" role="button" data-toggle="popover"><%= f.label :pets %></a></span>


<div id="test-content" class="hide">
  <div class="container-fluid">
    <label id="label-sentence-fee" class="general-text-label" for="sentence-fee"><input type="checkbox" name="label-sentence-fee" id="sentence-fee"> No Fee Listing</label><br>
    <label id="label-sentence-transit" class="general-text-label" for="sentence-transit"><input type="checkbox" name="label-sentence-transit" id="sentence-transit"> Transit</label><br>
    <label id="label-sentence-pets" class="general-text-label" for="sentence-pets"><input type="checkbox" name="label-sentence-pets" id="sentence-pets"> Pets</label><br>
  </div>
</div>


<script>
  $(document).ready(function() {
    $("#sentence-fee").click(function(feeEvent) {
      $("#listing-search-sentence-fee").toggle();
    });

    $("#sentence-transit").click(function(transitEvent) {
      $("#listing-search-sentence-transit").toggle();
    });

    $("#sentence-pets").click(function(petsEvent) {
      $("#listing-search-sentence-pets").toggle();
    });
  });
</script>

【讨论】：

我更新了我的代码，但复选框仍然不起作用。
@MikeWiesenhart 你有任何可能覆盖复选框的 CSS，或者你的复选框有负 z-index
@MikeWiesenhart 进行调试，从页面中删除所有代码以及 css，并且只使用上面的代码，这行得通吗？如果它起作用了，把东西一个一个移回来，你可以找出是哪个元素或代码破坏了它。

【解决方案2】：

它总是得到父元素事件，如果他有的话。

【讨论】：

你能解释一下吗？
这个答案在当前状态下毫无意义。请澄清你的意思。
如果我有一个涉及input 的label，我将永远无法在input 上获得`click` 事件，只能在`label. In input, you can use 上获得`click` 事件onChange`。
你明白吗？