我正在制作一个商店过滤器,我需要动态获取已选择的单选按钮的值,并使用该值作为参数执行过滤器函数。
我的网页是
<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())
到每个单选按钮...但我不知道我该怎么做。
我更喜欢香草js的解决方案,因为我正在尝试在其中推进我的门槛:)谢谢<</p>
在这种情况下,我更喜欢做的是将事件委托给父容器:
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:从处理程序中删除了不必要的循环。
有几件事,您的输入应该具有相同的名称以将它们组合在一起,而不是使用相同的 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>
假设您编辑无线电,使它们都具有相同的名称,则为其check
事件分配一个函数,以便仅在更改输入值时触发。
$(document).on("check", "[name='option_gender']", function (){
filterFunction($(this).val());
});