触屏笔记本电脑上的复选框无法使用。

Question

我有一个复选框，如下所示

<div class="icheck" style="margin-top: 5px !important;">
   <input type="checkbox"
   name="param_{{ $item->id }}"
   d="param_{{ $item->id }}"
   value="1"
   class="checkListItem"
   @if ($item->value == 1) checked @endif> 
</div>

当被选中时，将值设置为1，否则为0

$('body')
   .on('ifChecked', '.checkListItem', function(){
   $(this).val(1);
})

   .on('ifUnchecked', '.checkListItem', function(){
   $(this).val(0);
);

如果计算机没有触屏，它在手机和计算机上的表现非常好。在触屏计算机上（除了Linux），它无法选中复选框。

我尝试了点击触摸事件，但它不起作用。

$('.checkListItem').on('click tap', function(e){
    console.log("works");
    e.preventDefault();
});

我有些迷茫，因为在使用Linux的触摸屏电脑上无法正常使用 input type="checkbox"。这可能存在什么问题？如何使其在触摸屏上正常工作？

谢谢！

- alienwife

---

尝试在您的点击函数中使用touchend而不是tap...希望它能起作用... - ElusiveCoder

Answer 1

$('.radiogroup').on('click touchend',function(){
 console.log("works");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="radiog" id="male" class="radiogroup" checked> Male
<input type="radio" name="radiog" id="femail" class="radiogroup"> Female

尝试对于触摸设备使用 Touchstart 或 touchend。

$('.checkListItem').on('click touchstart touchend', function(e){
    console.log("works");
    e.preventDefault();
});

- Nikhil Ghuse

---

如果是触摸设备，则只有三个事件：touchstart、touchmove和touchend。 - Nikhil Ghuse

我将$('.checkListItem')更改为包裹它的div。然后它有了响应。但是勾选标记没有显示。我猜测它没有将值更改为已选中。但这是一个开始。谢谢！ - alienwife

并不是因为输入值没有改变。 - alienwife

现在它正在工作，请检查我的答案，我已经在手机上测试过了。 - Nikhil Ghuse

在 Chrome 开发工具上，带触控的笔记本不起作用。 - alienwife