jQuery selectable() 不响应复选框勾选

Posted 2023-05-07

【中文标题】jQuery selectable() 不响应复选框勾选

【英文标题】：jQuery selectable() not responding to checkbox ticks

【发布时间】：2019-05-27 14:53:33

【问题描述】：

我有一组复选框，可以通过使用 selectable() 插件将鼠标拖到标签上轻松地选中/取消选中它们。但是，如果我专门单击复选框输入框而不是其标签，则不会发生任何事情。我已经使用过滤器尝试了各种组合，但除了使用“标签”之外似乎没有任何效果。无论用户拖动输入框还是标签，我都希望行为相同。现在有几个小时了，请帮忙！下面摆弄一下。

<form>
 <div class='myBoxes'>

  <label>Check 1<input type="checkbox" id="chk1" /> </label>
  <label>Check 2<input type="checkbox" id="chk2" /> </label>
  <label>Check 3<input type="checkbox" id="chk3" /> </label>
  <label>Check 4<input type="checkbox" id="chk4" /> </label>

 </div>
</form>



$(".myBoxes").selectable(

  filter: 'label',

  stop: function() 
    $(".ui-selected input", this).each(function() 
      this.checked = !this.checked;

      if ($(this).is(':checked')) 
        console.log($(this));
        $(this).parent().addClass("LabelHighlight")
       else 
        $(this).parent().removeClass("LabelHighlight")
      

    );
  
);



 label 
  display: block;
  padding: 7px;
  width: 120px;
  margin-bottom: 14px;
  border: 1px solid red;


label.ui-selecting 
  background: lightgreen;


.LabelHighlight 
  background: lightgreen;

http://jsfiddle.net/y7xk032m/

【问题讨论】：

所以你需要一个使用这个插件的解决方案？？或任何解决方案？？

【参考方案1】：

复选框是 div 上的另一个 DOM，因此您必须将相同的事件附加到它，如下所示：

$("input[type='checkbox']").click(function(event)
    if ($(this).is(':checked')) 
    console.log($(this));
    $(this).parent().addClass("LabelHighlight")
   else 
    $(this).parent().removeClass("LabelHighlight")
  
);

演示http://jsfiddle.net/86njvLrw/

【讨论】：

我明白了，谢谢你的解释。它确实使代码冗长，但我知道如果我想使用这个插件，别无选择。

【参考方案2】：

对我来说我不会使用selectable() 我只会使用click() 事件.. 方法如下

$('.myBoxes label').on('click' , function(e)
    $("input:checkbox" , this).change();
);
$("input:checkbox").on("click" , function(e)
    $(this).closest('label').toggleClass("LabelHighlight");
);

label 
  display: block;
  padding: 7px;
  width: 120px;
  margin-bottom: 14px;
  border: 1px solid red;


label.ui-selecting 
  background: lightgreen;


.LabelHighlight 
  background: lightgreen;

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

<form>
  <div class='myBoxes'>

    <label>Check 1<input type="checkbox" id="chk1" /> </label>
    <label>Check 2<input type="checkbox" id="chk2" /> </label>
    <label>Check 3<input type="checkbox" id="chk3" /> </label>
    <label>Check 4<input type="checkbox" id="chk4" /> </label>

  </div>
</form>

您可以参考jQuery difference between change and click event of checkbox

【讨论】：

是的，这是我之前的插件。但是，插件实现的拖动和套索非常适合我在这里的特殊需求，所以如果可能的话，我宁愿坚持下去。

如果您将插件用于其他事情，它可以@Silverburch .. 我发布了我的答案 1st：我假设您只需要插件来做这件事.. 2nd：让您知道没有插件的另一种方法..无论如何祝你有美好的一天:-)