I'm making a shop filter and I need to dynamically get the value of the radio button that has been selected and execute a filter function with the value as a parameter.
my HTML is
<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>
My idea was something like
$(document).ready(function(){
$('#option_gender').click(function(){
filtefFunction(this.value)
});
});
or an addEventListener('click' func())
to each radio button ... but i dont know how can i do this.
I prefer of the solution is in vanilla js, because I'm trying to advance my sills in it :) thank you
A few things, your input should have same name to group them together, and not use the same id. i have replaced your id with class.
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>
You can use global variable to save the value of the radio button that has been selected
Try this:
var selectedGender;
function executeFilter(input) {
// do filter
}
$(document).ready(function(){
$('input.option_gender').click(function(){
selectedGender = (this).attr('value'));
executeFilter(selectedGender);
});
});
You should give to each input a class name , id just match the first element!
Example:
<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>
What I prefer to do in cases like this is to delegate an event to the parent container:
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>
As a sidenote you don't want to use same id's for different elements, on the other hand if you want your radio group allowing to select only one value — use same name
attribute. Also autocomplete
attribute is redundant for inputs of radio
type. It won't do anything.
UPD: removed unnecessary loop from the handler.
Supposing you edit your radios so all of them have the same name, you assign a function to their check
event so it only triggers when you change the input value.
$(document).on("check", "[name='option_gender']", function (){
filterFunction($(this).val());
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.