如何使用JQuery更改onClick复选框的值?

时间:2012-02-04 11:50:33

标签: javascript jquery forms javascript-events ternary-operator

这里我试图在点击它时更改以下复选框的值。在下面的代码中,我尝试将复选框的值更改为1,并在取消选中时将值更改为0。但它只需要错误的条件,当取消选中复选框时,值会更改为0但是当选中时它不会更改为1.任何建议如何解决这个问题?

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

4 个答案:

答案 0 :(得分:21)

我真的不明白你为什么要这样做(当取消选中时,复选框的值不会被提交)。

checked property on the DOM element将始终告诉您是否已选中。所以你可以得到this.checked(Javascript DOM)或$(this).prop('checked')(jQuery包装器)。

如果你真的需要,你应该这样做:

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的原因。

答案 1 :(得分:0)

通常,您不希望更改复选框(或单选按钮)的值属性。这会在Web应用程序中引发难以跟踪的错误。

如果要在选中字段时为其指定特定值,您还可以考虑引入隐藏输入<input type="hidden"...>并为其指定值,而不是复选框。

答案 2 :(得分:0)

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

<强> HTML:

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

<强> Jquery的:

&#13;
&#13;
$("#read").click(function() {

		if($("#read").val()==0)
		{
		 $("#read").val(1);
		}
		else
		{
		 $("#read").val(0);
		}
		alert($("#read").val());
		
	});
&#13;
<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
&#13;
&#13;
&#13;

答案 3 :(得分: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"/>