Question

我有一个自定义复选框，它会将它的值打印到控制台，我想放一个按钮，勾选复选框而不执行复选框事件。这仅用于教育目的。

$(document).on('click', '#chk', function() {
  if (this.checked === true) {
    console.log('true');
  } else {
    console.log('false');
  }
});
$(document).on('click', '#chkbtn', function() {
  $('#chk').click();
});

.chk {
  display: none;
}
.chk + label {
  cursor: pointer;
  color: #000;
}
.chk:checked + label:after {
  font-family: 'FontAwesome';
  content: "\f164";
}
.chk + label:after {
  font-family: 'FontAwesome';
  content: "\f087";
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<button class="btn btn-default" id="chkbtn">Click me!</button>
<br>
<input type="checkbox" class="chk" id="chk" />
<label for="chk"></label>

如果点击按钮，我只想更改复选框图标但我不希望复选框的事件被执行。有没有办法做到这一点？

Answer 1

只需更改按钮单击事件处理程序即可更改复选框的属性

$(document).on('click', '#chkbtn', function() {
  $('#chk').prop( "checked", true );
});

这是带演示的完整代码

＆＃13;

$(document).on('click', '#chk', function() {
  if (this.checked === true) {
    console.log('true');
  } else {
    console.log('false');
  }
});
$(document).on('click', '#chkbtn', function() {
  if ( $('#chk').prop( "checked" ) )
  {
     $('#chk').prop( "checked", false );
  }
  else
  {
     $('#chk').prop( "checked", true );
  }
});

＆＃13;

.chk {
  display: none;
}
.chk + label {
  cursor: pointer;
  color: #000;
}
.chk:checked + label:after {
  font-family: 'FontAwesome';
  content: "\f164";
}
.chk + label:after {
  font-family: 'FontAwesome';
  content: "\f087";
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<button class="btn btn-default" id="chkbtn">Click me!</button>
<br>
<input type="checkbox" class="chk" id="chk" />
<label for="chk"></label>

＆＃13;

Answer 2

试试这个：在你的JS动作之后添加event.preventDefault（）。

$(document).on('click', '#chk', function(event) {
  if (this.checked === true) {
    console.log('true');
  } else {
    console.log('false');
  }
     event.preventDefault();
});

Answer 3

您可以将检查状态设置为

，而不是触发click事件

$(document).on('click', '#chk', function() {
  snippet.log('state: ' + this.checked);
});
$(document).on('click', '#chkbtn', function() {
  $('#chk').prop('checked', function(i, checked) {
    return !checked;
  });
});

.chk {
  display: none;
}
.chk + label {
  cursor: pointer;
  color: #000;
}
.chk:checked + label:after {
  font-family: 'FontAwesome';
  content: "\f164";
}
.chk + label:after {
  font-family: 'FontAwesome';
  content: "\f087";
}

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<button class="btn btn-default" id="chkbtn">Click me!</button>
<br>
<input type="checkbox" class="chk" id="chk" />
<label for="chk"></label>

jQuery：如何使用jquery勾选复选框而不执行它的绑定事件？

3 个答案: