复选框值不能基于选中或使用jquery取消选中来更改[重复]

Posted 2023-03-05

【中文标题】复选框值不能基于选中或使用jquery取消选中来更改[重复]

【英文标题】：Checkbox value cannot be changed based on check or unchecked using jquery [duplicate]

【发布时间】：2018-09-26 06:24:14

【问题描述】：

复选框值被更改为 1，但未选中则无法更改为 0

$('.ChkBox').change(function() 
  if ($(this).attr('checked')) 
    $(this).val('1');
   else 
    $(this).val('0');
  
  alert($(this).val());
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" checked data-plugin="switchery" data-color="#648c2c" data-size="small" value="0" class="ChkBox" name="sms[]" />

在警报中我总是得到 1。

默认值为 0 并选中。 我想要它，这样当盒子未被选中时，我得到1，当检查时，我得到0.请告诉我在哪里我做错了。

【问题讨论】：

使用if ($(this).is(':checked'))

感谢@j08691的帮助

【参考方案1】：

给你一个解决方案

$('.ChkBox').change(function() 
  if ($(this).prop('checked')) 
    $(this).val('1');
   else 
    $(this).val('0');
  
  console.log($(this).val());
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" checked data-plugin="switchery" data-color="#648c2c" data-size="small" value="0" class="ChkBox" name="sms[]" />

请使用.prop（属性）代替.attr

【讨论】：

解释为什么他应该使用 prop 而不是 attr 会很棒。

感谢您的帮助。现在它的工作

【参考方案2】：

你可以用is(':checked')和ternary condition代替.attr

$('.ChkBox').change(function() 
  $(this).val( $(this).is(':checked') ? '1' : '0' );
  console.log($(this).val());
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" checked data-plugin="switchery" data-color="#648c2c" data-size="small" value="0" class="ChkBox" name="sms[]" />

【参考方案3】：

试试这个：

我刚刚在 html 中使用了 onclick 事件，为了调试，我使用了 Jquery。如果不需要，可以删除 Jquery。

$(".ChkBox").on("change", function() 
var a = $(this).val();
alert(a);
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" checked data-plugin="switchery" data-color="#648c2c" data-size="small" value="0" class="ChkBox" name="sms[]" onclick="$(this).attr('value', this.checked ? 1 : 0)"/>

希望这会有所帮助。