如何使用 JQuery 更改 onClick 复选框的值？答案

【问题标题】：How to change the value of a check box onClick using JQuery?如何使用 JQuery 更改 onClick 复选框的值？
【发布时间】：2012-02-26 18:40:36
【问题描述】：

在这里，我尝试在单击以下复选框时更改它的值。在下面的代码中，我尝试将复选框的值更改为 1，并在未选中时将值更改为 0。但它只需要错误条件，当未选中复选框时，值更改为 0，但选中时它不更改为 1。有什么建议可以解决这个问题吗？

<input type="checkbox" id="read" name="permission[]" onClick="($(this).checked)?$(this).attr('value',1):$(this).attr('value',0)"/>

【问题讨论】：

通常您不想更改复选框（或单选按钮）的 value 属性...（请参阅发布的答案）。

标签： javascript jquery forms dom-events ternary-operator

【解决方案1】：

我真的不明白你为什么要这样做（复选框的值在未选中时无论如何都不会提交）。

checked property on the DOM element 总是会告诉你它是否被选中。所以你可以得到this.checked（Javascript DOM）或$(this).prop('checked')（jQuery wrapper）。

如果你真的需要，你应该这样做：

onclick="$(this).attr('value', this.checked ? 1 : 0)"

甚至

onclick="$(this).val(this.checked ? 1 : 0)"

甚至更好，don't use inline event handlers（如 onclick），但使用 jQuery 的事件处理包装器（.on('click') 或 .click() 在旧版本中）。

jsFiddle Demo with jQuery event handling

你的方法的问题

您正在使用$(this).checked 来获取复选框的状态。 jQuery 对象（由$ 函数返回的对象）没有checked 属性，因此它将是undefined。在 Javascript 中，undefined 是一个 falsy 值，这就是为什么您的复选框的值始终是 0。

【讨论】：

感谢您提供的最佳答案，让我免于浪费一天的时间进行搜索

【解决方案2】：

你可以使用这个简单的点击功能来实现它。

HTML：

<input type="checkbox" id="read" name="permission[]" value="0"/>

jQuery：

$("#read").click(function() {

		if($("#read").val()==0)
		{
		 $("#read").val(1);
		}
		else
		{
		 $("#read").val(0);
		}
		alert($("#read").val());
		
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="read" name="permission[]" value="0"/> 
Click the check box to toggle the value 0 and 1

【讨论】：

【解决方案3】：

// o = object
function get(o) { 

  ( $(o).val() == 0 ) ? $(o).val(1) : $(o).val(0);
    
  // alert( $(o).val() );
    
  console.log( $(o).val() );
		
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="permission[]" onClick="get(this)" value="0"/>

【讨论】：