复选框值真/假

Posted 2023-02-22

【中文标题】复选框值真/假

【英文标题】：Checkbox value true/false

【发布时间】：2016-09-01 13:32:39

【问题描述】：

我有一个带有复选框的表单，我想在提交表单后保持选中状态，当它返回到同一个视图并出现错误时。我听说 value 属性可以帮助我选中复选框，所以我试图将其设置为 true/false。无论如何，即使我单击它，输入值也会保持“假”。究竟会发生什么？ 我认为单击复选框后该值变为真/假

<input type="checkbox" name="acceptRules" class="inline checkbox" id="checkbox1" value="false">

      <script>
          $("#checkbox1").is(':checked', function()
              $("#checkbox1").attr('value', 'true');
          );
      </script>

【问题讨论】：

我对这个问题感到困惑。如果选中该复选框，您似乎想要更改该值。但传统上，复选框的值不会改变。它们的状态决定了它们是否被传递到后端。

值得指出的是，当切换复选框时，元素的 html 实际上并没有改变。因此，执行.getAttribute('checked') 不会返回任何内容，即使您将 'checked' 属性应用于 HTML 以设置其初始状态。修复方法是访问输入的 JS 属性，也称为 checked。即在用于复选框更改事件的普通 JS 处理程序中，这什么都不做：byId('tgt').value = this.getAttribute('checked');，而这会将文本设置为真或假：byId('tgt').value = this.checked;

您是说在第 1 页上您可以选择选择一个复选框然后提交，而在第二页上您希望选中状态与第一个表单上的状态保持一致？

如果复选框没有被点击，我只需要返回一个错误信息。该死的

【参考方案1】：

如果我理解这个问题，您想根据是否选中来更改复选框的值。

这是一种解决方案：

$('#checkbox-value').text($('#checkbox1').val());

$("#checkbox1").on('change', function() 
  if ($(this).is(':checked')) 
    $(this).attr('value', 'true');
   else 
    $(this).attr('value', 'false');
  
  
  $('#checkbox-value').text($('#checkbox1').val());
);

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


<input type="checkbox" name="acceptRules" class="inline checkbox" id="checkbox1" value="false">

<div id="checkbox-value"></div>

【讨论】：

.on('change', 正是我所需要的

【参考方案2】：

使用Checked = true

$("#checkbox1").prop('checked', true);

注意：我不清楚您是否要在复选框上设置 onclick/onchange 事件。 is(":checked", function()) 是一个错误的问题。

【讨论】：

'true' 是否与布尔值做同样的事情？

不确定是否需要在 true 两边加上单引号

使用 'true' 时，它会按预期工作。但是如果你想取消选中并使用'false'将不起作用。所以最好使用布尔值。更新。谢谢:)

prop 不是函数 :(

【参考方案3】：

要根据是否选中复选框来返回真或假，我在 JQuery 中使用它

let checkState = $("#checkboxId").is(":checked") ? "true" : "false";

【参考方案4】：

试试这个

$("#checkbox1").is(':checked', function()
  $("#checkbox1").prop('checked', true);
);
      

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="acceptRules" class="inline checkbox" id="checkbox1" value="false">

【参考方案5】：

复选框在 JS 中真的很奇怪。您最好检查是否存在 checked 属性。 （即使 checked 设置为 'false'，我的旧 jQuery 版本也会返回 true。）一旦您确定检查了某些内容，您就可以从 value 属性中获取值。

【参考方案6】：

jQuery.is() 函数没有.is('selector', function) 的签名。

我猜你想做这样的事情：

      if($("#checkbox1").is(':checked'))
          $("#checkbox1").attr('value', 'true');
      

【讨论】：

感谢您指出这一点。无论如何它仍然对我不起作用。哦上帝为什么xD

【参考方案7】：

我将在以下假设下发布此答案。 1) You (un)selected the checkbox on the first page and submitted the form. 2) Your building the second form and you setting the value="" true/false depending on if the previous one was checked. 3) You want the checkbox to reflect if it was checked or not before.

如果是这种情况，那么您可以执行以下操作：

var $checkbox1 = $('#checkbox1');
$checkbox1.prop('checked', $checkbox1.val() === 'true');

【参考方案8】：

或者您可以使用 onClick 仅使用 javascript 来解决此问题：

<input type="checkbox" name="acceptRules" class="inline checkbox" id="checkbox1" value="false" onClick=e => console.log(e.target.checked)>

【参考方案9】：

使用这个的好习惯：

$('.name-checkbox:checked').length