Question

我对jquery和复选框有一种奇怪的行为。在我的表单中，我构建了一个包含一些数据的表。用户可以单击行或输入复选框以选择行并将其添加到选择中。 I build this fiddle for example 所以当你点击行时没关系，行已被选中，我已经获得了我的身份证。但是当你第一次点击输入时，输入就会被检查，但是当我们释放按钮时，他就会被取消选中。如果我们再次点击，行为是正确的。我知道我做错了什么，但却找不到什么。我需要使用mousedown事件进行多项选择，并允许用户只需点击一下即可选择多个id。

_isMouseDown = false;
jQuery(document).on('mousedown',function(event) {
    _isMouseDown = true;
});
jQuery(document).on('mouseup',function(event) {
    _isMouseDown = false;
});
(function($) {
var sTableId = 'lois_server_select';
var aAvailableServerClicked = new Array();
var aServerSelectedClicked = new Array();

$('.lois_server_select tr').hover(
    function () {
       if(_isMouseDown == true){
           //exec onmousedown
           $(this).trigger('mousedown');
       }
   },function (){}
);

//bug with the first click on checkbox unchecke the input 
$('.lois_server_select input').click(function(evt){
    _that = $(this);

    if(_that.closest('tr').hasClass('clicked')){
        _that.prop('checked',true);
    } else {
        _that.prop('checked',false);
    }
});

$('.lois_server_select tr').bind('mousedown',function(evt) {
    console.log('this',this);
    var _that = $(this);
    var _checkbox = $(':checkbox',_that);
    console.log('checkbox',_checkbox);
    console.log('start checked:',_checkbox.attr('checked'));
    if(_checkbox.val() == undefined) return;

    console.log('checked:',_checkbox.prop('checked'));
    if(_that.hasClass('clicked')){
        //remove class
        _that.removeClass('clicked');
        //uncheck checkbox
        _checkbox.prop('checked',false);
        //remove to aAvailableServerClicked
        if(sTableId == 'lois_server_select'){
            aAvailableServerClicked.splice($.inArray(_checkbox.val(), aAvailableServerClicked),1);
        } else {
            aServerSelectedClicked.splice($.inArray(_checkbox.val(), aServerSelectedClicked),1);
        }

    } else {
        //add selected class
        _that.addClass('clicked');
        //check checkbox

        _checkbox.prop('checked',true);

        //add to aAvailableServerClicked
        if(sTableId == 'lois_server_select'){
            aAvailableServerClicked.push(_checkbox.val());
        } else {
            aServerSelectedClicked.push(_checkbox.val());
        }
    }
    console.log('end checked:',_checkbox.attr('checked'));
    //evt.stopPropagation();
});

})(jQuery);

谢谢你的帮助。

Answer 1

在阅读了一些其他堆栈帖子（Detect left mouse button press，Check if mouse button is down while hovering?）后，看起来检测按钮可能有点棘手。以下内容适用于Chrome。根据帖子，它可能（应该）也适用于其他浏览器。

$(function() {
  function detectLeftButton(event) {
    if ('buttons' in event && event.buttons) {
      return event.buttons === 1;
    } else if ('which' in event) {
      return event.which === 1;
    } else {
      return event.button === 1;
    }
  }
  $('input[type=checkbox]').hover(function(ev) { 
    console.log(ev)
    if (detectLeftButton(ev)) {
      console.log("left button is down")
      $(ev.target).trigger('click')
    }
  }, function() { });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="cb1">cb1</label><input id="cb1" name="cb1" type="checkbox"/>
<br/>
<label for="cb2">cb2</label><input id="cb2" name="cb2" type="checkbox"/>
<br/>
<label for="cb3">cb3</label><input id="cb3" name="cb3" type="checkbox"/>
<br/>
<label for="cb4">cb4</label><input id="cb4" name="cb4" type="checkbox"/>
<br/>

这可能有助于简化您的代码，因为您实际上只需要hover回调中的帮助方法。您无需跟踪鼠标的状态，因为事件包含该信息（在buttons或which下）。

正如您所看到的，我编写了一些类似于您的HTML但简化的HTML。希望这将映射到您的用例。

我也没有添加逻辑来管理选择了哪些服务器，但它似乎是一个类似

的辅助方法

function getAvailableServers(table) {
  return $(table).find(':checked')
});

可用于抓取所选项目。您可能需要通过map函数运行它以从选择中获取值，但只有在您确实需要服务器列表时才能调用帮助程序。

jquery输入复选框检查了奇怪的行为

1 个答案: