Jquery复选框在单击时保持选中状态

Jquery Checkbox remains check on click

本文关键字：状态 复选框 单击 Jquery      更新时间：2023-09-26

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

问题：第一次单击时，复选框被选中，工作正常。再次单击输入时，复选框将变为未选中状态。

所需输出：

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

我搜索了很多例子来找到这个解决方案，但找不到

感谢您的帮助。

请参阅Fiddle：

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

JS:

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

您在评论中澄清了，您希望点击文本框来选中复选框，但点击复选框本身可以正常工作。因此，不要触发点击事件，只需直接设置复选框的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>

试试这个：

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

一个选项是将其包装在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"); 
});

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

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

保持复选框处于选中状态的最佳方法是在复选框上添加一个处理程序onchange监听器，并将其设置为javascript attribute checked=true

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

文档参考：道具

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

相关文章：