如何使用JQuery更改Click上复选框的值

How to change the value of a check box onClick using JQuery?

本文关键字：复选框 Click 何使用 JQuery 更改      更新时间：2023-09-26

在这里，我试图在点击下面复选框的同时更改它的值。在下面的代码中，我试图将复选框的值更改为1，并在取消选中时将值更改为0。但它只接受false条件，当复选框未选中时，值将变为0，但当选中时，它不会变为1。有什么建议可以解决这个问题吗？

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

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

DOM元素的checked属性将始终告诉您是否选中了它。因此，您可以获得this.checked（Javascript DOM）或$(this).prop('checked')（jQuery包装器）。

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

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

甚至

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

或者更好的是，不要使用内联事件处理程序（如onclick），而是使用jQuery的事件处理包装器（旧版本中为.on('click')或.click()）。

jsFiddle演示与jQuery事件处理

你的方法有问题

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

// 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"/>

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

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

相关文章：