Question

我正在制作商店过滤器，我需要动态获取已选择的单选按钮的值，并以值作为参数执行过滤器功能。

我的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()) ...但我不知道我该怎么做。

我更喜欢解决方案是在香草js，因为我试图推进我的窗台:)谢谢

Answer 1

有些事情，您的输入应该具有相同的名称以将它们组合在一起，而不是使用相同的ID。我已经用课程取代了你的身份。

＆＃13;

function getActive(){
	console.log( document.querySelector('.option_gender:checked').value );
}
document.querySelectorAll(".option_gender").forEach( input => input.addEventListener('click', getActive) );

＆＃13;

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

＆＃13;

Answer 2

您可以使用全局变量来保存已选中的单选按钮的值

试试这个：

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>

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

在这种情况下，我更喜欢将事件委托给父容器：

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：从处理程序中删除了不必要的循环。

Answer 5

假设您编辑了无线电，因此它们都具有相同的名称，您可以为其check事件分配一个功能，以便仅在更改输入值时触发。

$(document).on("check", "[name='option_gender']", function (){
    filterFunction($(this).val());
});

为Bootstrap单选按钮上的Click / change添加事件侦听器

5 个答案: