Jquery Checkbox 在点击时保持选中状态答案

【问题标题】：Jquery Checkbox remains check on clickJquery Checkbox 在点击时保持选中状态
【发布时间】：2016-09-30 03:34:41
【问题描述】：

我有一个复选框，一旦用户单击输入框，该复选框需要保持选中状态。

问题： On First Click 复选框被选中，它工作正常。再次单击输入时，复选框变为未选中状态。

需要输出：

我希望复选框保持选中状态，因为这会触发更改事件。

我搜索了许多示例以找到此解决方案，但找不到。

感谢任何帮助。

请看小提琴：

http://jsfiddle.net/nrYec/194/

JS：

$('input').click(function() {
     $('#x').text(this.checked ? "is checked" : "is not checked");
 });
 $('.b2').click(function() {
      $('.trigger').click();
 });

【问题讨论】：

您是说单击任一文本框应将复选框设置为选中（如果尚未选中），但单击复选框本身应允许取消选中？
那么当你点击文本框时，你为什么要切换复选框状态？这里到底应该发生什么。
@nnnnnn 正确单击文本框应该只能在一个方向上工作，请选中复选框。除非用户手动取消选中。
而不是单击输入将其设置为检查。你可以用 prop()

标签： javascript jquery html forms checkbox

【解决方案1】：

您在 cmets 中阐明您希望单击文本框以选中复选框，但单击复选框本身可以正常工作。所以不要触发点击事件，直接设置复选框的checked属性即可：

$('.b2').click(function() {
  $('.trigger').prop("checked", true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input class='trigger' type='checkbox'>
<input class='b2' type='text' name='something'>
<input class='b2' type='text' name='something'>
<div id='x'></div>

【讨论】：

【解决方案2】：

试试这个：

$('.b2').click(function() {
    if (!$('.trigger').prop('checked')) {
        $('.trigger').prop('checked', 'true');
    };
});

$('input').click(function() {
    $('#x').text($('.trigger').prop('checked') ? "is checked" : "is not checked");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class='trigger' type='checkbox'>
<input class='b2' type='text' name='something'>
<input class='b2' type='text' name='something'>
<div id='x'></div>

【讨论】：

【解决方案3】：

一种选择是将其包装在if 语句中：

JS Fiddle

$('.b2').click(function() {
  var trigger = $('.trigger');
  if (!$('.trigger').is(':checked')) {
    trigger.click();
  }
});

$('input').click(function() {
  // And need to check if the checkbox (not any input) is checked here
  $('#x').text($('.trigger').is(':checked') ? "is checked" : "is not checked"); 
});

【讨论】：

【解决方案4】：

$('input').click(function() {
  if ($(this).attr('type') !== "checkbox")
    $('input[type="checkbox"]').prop('checked', true)
});

这将强制在单击任何其他输入时选中复选框，但在单击时会正常运行。

【讨论】：

但这会让您无法取消选中该复选框。

【解决方案5】：

保持复选框处于选中状态的最佳方法是在复选框上添加一个处理程序 onchange 侦听器，然后将其设置为 javascript 属性已检查 = true

$('.trigger').on('change', function() {
 $('.trigger')[0].checked = true;
})

【讨论】：

【解决方案6】：

文档参考：prop

$('.b2').on('click',function() {
  $('.trigger').prop("checked", true);
}).on('blur',function(){
   if($(this).val().trim().length === 0){
     $('.trigger').prop("checked", false);
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class='trigger' type='checkbox'>
<input class='b2' type='text' name='something'>
<input class='b2' type='text' name='something'>
<div id='x'></div>

【讨论】：