![](/img/trans.png)
[英]Bootstrap radio buttons “Yes” or “No” not picking up change or click event
[英]Add Event listener for Click/change on Bootstrap radio buttons
我正在制作商店過濾器,我需要動態獲取已選擇的單選按鈕的值,並以該值作為參數執行過濾器功能。
我的HTML是
<div class="btn-group-vertical btn-group-toggle pl-2" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="option_all" id="option_gender" autocomplete="off" value="All" checked=""> Unisex
</label>
<label class="btn btn-secondary">
<input type="radio" name="option_man" id="option_gender" autocomplete="off" value="Male"> Man
</label>
<label class="btn btn-secondary">
<input type="radio" name="option_woman" id="option_gender" autocomplete="off" value="Female"> Woman
</label>
</div>
我的主意是
$(document).ready(function(){
$('#option_gender').click(function(){
filtefFunction(this.value)
});
});
或每個單選按鈕的addEventListener('click' func())
...但我不知道該怎么做。
我更喜歡該解決方案是在vanilla js中,因為我正在嘗試改進它的基石:)謝謝
在某些方面,您的輸入應具有相同的名稱以將它們分組在一起,並且不能使用相同的ID。 我已將您的ID替換為課程。
function getActive(){ console.log( document.querySelector('.option_gender:checked').value ); } document.querySelectorAll(".option_gender").forEach( input => input.addEventListener('click', getActive) );
<div class="btn-group-vertical btn-group-toggle pl-2" data-toggle="buttons"> <label class="btn btn-secondary active"> <input type="radio" name="option" class="option_gender" autocomplete="off" value="All" checked=""> Unisex </label> <label class="btn btn-secondary"> <input type="radio" name="option" class="option_gender" autocomplete="off" value="Male"> Man </label> <label class="btn btn-secondary"> <input type="radio" name="option" class="option_gender" autocomplete="off" value="Female"> Woman </label> </div>
您可以使用全局變量來保存已選擇的單選按鈕的值
嘗試這個:
var selectedGender;
function executeFilter(input) {
// do filter
}
$(document).ready(function(){
$('input.option_gender').click(function(){
selectedGender = (this).attr('value'));
executeFilter(selectedGender);
});
});
您應該給每個輸入一個類名 , id只匹配第一個元素!
例:
<label class="btn btn-secondary active">
<input type="radio" name="option" class="option_gender" autocomplete="off" value="All" checked=""> Unisex
</label>
//get NOD-object of clicking element var button = document.getElementById('get_gender'); //method .onclick is prefer becouse not so much load the browser like EventListener button.onclick = function(e) { e.preventDefault();//this line stop send data to server console.log('hi');//this is work:) we check it }
<!--Replase name and id, becouse id is an unique name and proporty 'name' groupe radio-buttons --> <div class="btn-group-vertical btn-group-toggle pl-2" data-toggle="buttons"> <label class="btn btn-secondary active"> <input type="radio" id="option_all" name="option_gender" autocomplete="off" value="All" checked=""> Unisex </label> <label class="btn btn-secondary"> <input type="radio" id="option_man" name="option_gender" autocomplete="off" value="Male"> Man </label> <label class="btn btn-secondary"> <input type="radio" id="option_woman" name="option_gender" autocomplete="off" value="Female"> Woman </label> <button id="get_gender">Click</button> </div>
在這種情況下,我更喜歡將事件委托給父容器:
const select = document.getElementById('gender-selection'); select.addEventListener('click', ({ target }) => { // handler fires on root container click if (target.getAttribute('name') === 'option_gender') { // check if user clicks right element alert('Filter by: ' + target.value); } });
<div class="btn-group-vertical btn-group-toggle pl-2" id="gender-selection" data-toggle="buttons"> <label for="option_gender-unisex">Unisex</label> <input type="radio" name="option_gender" id="option_gender-unisex" value="All" checked=""> <label for="option_gender-man">Man</label> <input type="radio" name="option_gender" id="option_gender-man" value="Male"> <label for="option_gender-woman">Woman</label> <input type="radio" name="option_gender" id="option_gender-woman" autocomplete="off" value="Female"> </div>
作為旁注,您不想對不同的元素使用相同的ID,另一方面,如果您希望您的無線電組僅選擇一個值,請使用相同的name
屬性。 autocomplete
屬性對於radio
類型的輸入也是多余的。 它什么也不會做。
UPD:從處理程序中刪除了不必要的循環。
假設您編輯了無線電,使它們都具有相同的名稱,則可以為它們的check
事件分配一個功能,以便僅在更改輸入值時才觸發。
$(document).on("check", "[name='option_gender']", function (){
filterFunction($(this).val());
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.