单击复选框后，取消选中其他复选框并在先前选中的复选框上触发更改或单击事件答案

【问题标题】：Upon clicking a checkbox, uncheck other checkboxes and trigger change or click event on the on one that was previously checked单击复选框后，取消选中其他复选框并在先前选中的复选框上触发更改或单击事件
【发布时间】：2020-12-31 07:15:06
【问题描述】：

我有一组用于过滤功能的复选框，单击它们会触发某些功能。我需要一次检查一个复选框，这不是问题，但我需要在先前选中的复选框上触发单击或更改事件，因为更改“道具”不会触发任何事件。

 <input type="checkbox" data-filter="threebed" class="bedroomsCheck" name="bedrooms" value="three">
 <input type="checkbox" data-filter="fourbed" class="bedroomsCheck" name="bedrooms" value="four">
 <input type="checkbox" data-filter="fivebed" class="bedroomsCheck" name="bedrooms" value="five">

我的方法在过滤功能上没有给出适当的输出。

  $(document).on('click', '.bedroomsCheck', function() { 

      $('.bedroomsCheck').not(this).prop('checked', false);
      $('.bedroomsCheck').each( function (){
            if(!(this) && is(':checked')){

               //how do I target the one that meets condition?

             }
      });
 });

 //This didn't work either
 $('.hometypeCheck').not(this).prop('checked', false).trigger('change');   //click, change

【问题讨论】：

如果用户每次只能勾选1个，用单选按钮不是更好吗？
没错，这肯定会解决问题，但如果我更改输入类型，我还必须更改很多其他内容。更改为单选按钮是我最后的选择。

标签： javascript jquery

【解决方案1】：

试试这样：

var clicked;

$('.bedroomsCheck').on('click', function() {
  clicked = $(this);

  if ($(this).is(':checked')) {
    $('.bedroomsCheck:checked').not($(this)).each(function() {
      $(this).prop('checked', false);
      $(this).trigger('change');
    });
  };
});

$('.bedroomsCheck').on('change', function() {
  if (!clicked.is($(this))) {
    //do something useful here
    console.log($(this).val() + ' changed');
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" data-filter="threebed" class="bedroomsCheck" name="bedrooms" value="three">
<input type="checkbox" data-filter="fourbed" class="bedroomsCheck" name="bedrooms" value="four">
<input type="checkbox" data-filter="fivebed" class="bedroomsCheck" name="bedrooms" value="five">

在click 事件中，记住最后点击的是哪个输入（clicked 变量）。
如果单击的输入变为选中状态，则将所有其他选中的输入更改为未选中并触发其更改事件（可以使用$('.bedroomsCheck:checked').not($(this)) 选择）
在change事件中，检查变化的元素是否为clicked，如果不是，则执行有用的操作。

【讨论】：

【解决方案2】：

这不是很聪明，但是在每个复选框上设置一个change 处理程序并初始化一个变量来跟踪最后一个复选框。它开始于undefined。选中复选框时，遍历所有复选框并取消选中它们。然后调用触发函数或为最后一个复选框抛出一个事件或诸如此类的东西（第一次，这将是undefined，因为最后没有人被选中）。将当前复选框标记为选中，然后在 last 变量中存储对它的引用，以便为下一次做好准备。

const checkboxes = document.querySelectorAll("input");
checkboxes.forEach(checkbox => checkbox.addEventListener("change", checked));

let last;

function checked(event) {
  checkboxes.forEach(checkbox => checkbox.checked = false);
  trigger(last);
  event.target.checked = true;
  last = event.target;
}

function trigger(el) {
  if (el) console.log(el);
}

<input type="checkbox" data-filter="threebed" class="bedroomsCheck" name="bedrooms" value="three">
<input type="checkbox" data-filter="fourbed" class="bedroomsCheck" name="bedrooms" value="four">
<input type="checkbox" data-filter="fivebed" class="bedroomsCheck" name="bedrooms" value="five">

【讨论】：