チェックボックスは機能しませんが、ラベルは

Question

ラベルとチェックボックスがあります。ラベルをクリックすると、目的のアクションが実行されます。チェックボックスは何もしません。有効にするか無効にするかはクリックしないでください。私は入力の内側と外側の両方にラベルを移動しましたが、何も動かないようです。すべてのコードは以下の通りです。

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); 
}); 

Answer 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>

Answer 2

また、彼はそれを持っている場合は常に、親要素のイベントを取得します。あなたは、次の例のようなコードがある場合