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

I have a custom checkbox that will print it's value to the console and I want to put a button that will tick the checkbox without executing the checkbox event. This is for educational purpose only.

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

$(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>

if the button is click, I just want the checkbox icon to change but I don't want the event of the checkbox executed. Is there a way to do that?

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

3 个解决方案

#1

Just change the button click event handler to change the property of the checkbox

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

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

here is the full code with demo

这是带有demo的完整代码

$(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 );
  }
});

.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>

#2

try this : add event.preventDefault() after your JS action.

试试这个:在你的JS动作之后添加event.preventDefault()。

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

#3

Instead of triggering the click event, you can just set the checked state like

您可以只设置检查状态,而不是触发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>