单选radio和多选checkbox标签的值js,jq已经赋值了，提交时没有值，解决方案

最新推荐文章于 2023-05-29 14:29:58 发布

原创最新推荐文章于 2023-05-29 14:29:58 发布 · 936 阅读

1 ·

CC 4.0 BY-SA版权

JS 同时被 3 个专栏收录

166 篇文章

订阅专栏

113 篇文章

订阅专栏

前端HTML

82 篇文章

订阅专栏

正文

单选radio和多选checkbox标签的值js,jq已经赋值了，提交时没有值，解决方案

html 代码

<input type="radio" name="IsEnd" id="IsEndTrue" lay-filter="IsEnd" value="true" title="是">
<input type="radio" name="IsEnd" id="IsEndFalse" lay-filter="IsEnd" value="false" title="否" checked>

Js代码

$("#IsEndFalse").attr("checked", true);//选中（只是视觉效果）
$("#IsEndTrue").removeAttr("checked");//不选中 （只是视觉效果）
$("#IsEndFalse").prop("checked", true);//选中 （表单状态改变）
$("#IsEndTrue").prop("checked", false);//不选中（表单状态改变）

实际上，你在用attr()方法操作时，只是操作了视觉效果，并没有改变表单radio和checkbox的状态；所以需要用prop()方法同时去操作表单才能即改变表单的视觉又改变表单的状态；

jQuery prop() 方法

摘自：菜鸟教程

定义和用法

prop() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值时，则返回第一个匹配元素的值。

当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。

注意：prop() 方法应该用于检索属性值，例如 DOM 属性（如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected）。

提示：如需检索 HTML 属性，请使用 attr() 方法代替。

提示：如需移除属性，请使用 removeProp() 方法。

语法

返回属性的值：

$(selector).prop(property)

设置属性和值：

$(selector).prop(property,value)

使用函数设置属性和值：

$(selector).prop(property,function(index,currentvalue))

设置多个属性和值：

$(selector).prop({property:value, property:value,...})

参数	描述
property	规定属性的名称。
value	规定属性的值。
function(index,currentvalue)	规定返回要设置的属性值的函数。 index - 检索集合中元素的 index 位置。 currentvalue - 检索被选元素的当前属性值。

prop() 和 attr() 之间的不同

prop() 和 attr() 可能返回不同的值。本实例演示了当用于返回复选框的 "checked" 状态时的不同。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$("#p1").html("attr('checked'): " + $("input").attr('checked')
					  + "<br>prop('checked'): " + $("input").prop('checked'));
	});
});
</script>
</head>
<body>

<p><b>注意:</b>确认或取消选中该复选框,然后单击按钮刷新内容。</p>
<button>查看attr() 和 prop() 的值</button>
<br><br>
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p id="p1"></p>

</body>
</html>

推荐文章：

html中radio、checkbox选中状态研究

https://www.cnblogs.com/gopark/p/9460019.html