複選框不起作用，但標籤確實是

我有一個標籤和一個複選框。當我點擊標籤時，會出現所需的操作。當我點擊啓用或禁用時，複選框不會執行任何操作。我已經在輸入內部和外部移動了標籤，似乎沒有任何工作。所有的代碼都在下面。複選框不起作用，但標籤確實是

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

來源

2017-06-19 Mike Wiesenhart

'$（「輸入＃句子費」）丙（ '檢查'，真） ;'爲什麼你這樣做？點擊時是否希望始終檢查輸入？ – demo

@demo我不知道。只有當用戶選中該框時。 –

如果你刪除這行'$（「input＃sentence-fee」）。prop（'checked'，true）;'是否需要你exxt？當用戶點擊checkBox時 - 它會被檢查。第二次 - 它沒有檢查。有些事情是這樣的https://jsfiddle.net/xk9toseq/ – demo

如果你有一個像下面的示例代碼，應該爲你工作：

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

來源

2017-06-19 20:26:00

工作在片段中，但不在我的代碼中。 –

@MikeWiesenhart顯示所有與此相關的代碼 –

我添加了其他代碼。 –

-1

它總是得到父元素事件，如果他有它。

來源

2017-06-19 20:16:46

你能解釋一下嗎？ –

這個答案在當前狀態下沒有任何意義。請澄清你的意思。 – Li357

如果我有一個涉及'input'的'label'，我將永遠無法在'input'上獲取'click'事件，只能在''標籤'上。在'input'中，你可以使用'onChange'。 –

複選框不起作用，但標籤確實是

回答

相關問題