单选radio和多选checkbox标签的值js,jq已经赋值了,提交时没有值,解决方案-程序员宅基地

技术标签: # JQ  前端HTML  JS  

正文 

单选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()方法操作时,只是操作了视觉效果,并没有改变表单radiocheckbox的状态;所以需要用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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/cplvfx/article/details/108167882

智能推荐

七牛云存储之应用视频上传系统开心得-程序员宅基地

七牛云存储 七牛云存储(以下简称七牛),是专为移动时代开发者打造的数据管理平台,为互联网网站和移动App提供数据的在线托管、传输加速以及图片、音视频等富媒体的云处理服务。产品特性 1.数据的在线托管 七牛采用全分布式系统架构以及存储技术,主要存储图片、音视频等静态文件,并对数据实行多机房互备和跨IDC修复,从而保障数..._七牛 音视频 数据被裁剪

使用myPalletizer人工智能套件实现颜色和图像识别_人工智能 颜色识别_大象机器人的博客-程序员宅基地

这款产品为研发人员以及STEM教育工作者量身定做,他们会对人工智能套装与机器人相结合的应用程序感兴趣。如果你拥有这款人工智能套件,除了颜色和图像识别,你还想实现什么应用场景?请在评论中与我们分享!..._人工智能 颜色识别

dz论坛去掉orum.php,DiscuzX3.4最新论坛漏洞修复解决方案-程序员宅基地

原标题:DiscuzX3.4最新论坛漏洞修复解决方案Discuz!论坛目前最新版本为3.4版本,已经好久没有更新了,我们SINE安全在对其网站安全检测的同时发现一处漏洞,该漏洞可导致论坛的后台文件可以任意的删除,导致网站瘫痪,后台无法登陆。关于该网站漏洞的细节我们来详细的分析看一下:Discuz漏洞的检测与分析该漏洞发生的位置在于source目录下的admincp文件夹里的admincp_foru...

虚拟机(Vm12)+CentOS-7-x86_64-Minimal-1708 NAT模式 SecureCRT-程序员宅基地

虚拟机(Vm12)+CentOS-7-x86_64-Minimal-1708 NAT模式 SecureCRT实现CentOS能通过宿主机NAT模式上网,以及SecureCRT能连接虚拟机CentOS。

iOS编译FFmpeg、kxmovie实现视频播放-程序员宅基地

1. 下载脚本:https://github.com/kewlbear/FFmpeg-iOS-build-script2. 解压,找到文件 build-ffmpeg.sh3. 执行服本文件:./build-ffmpeg.sh, 由于本人没有事先安装Yasm 执行脚本文件会出错,如下:123456

mybatis plus使用雪花算法_MyBatis-Plus入门-程序员宅基地

weixin_慕神1349579很抱歉,网站规定,免费课程不提供源代码。有的同学把参考我课程内容编写的代码分享出来了,你可以在问答评论区找找分享地址。2020-12-071回答·16浏览weixin_慕神1349579你的@MapperScan注解的属性,就是Mapper接口所在包的路径,需要只包含mapper接口所在的包,你是不是包的范围写大了。2020-12-071回答·16浏览慕沐81177...

随便推点

CHRE: chre_slpi的代码流程_return reinterpret_steal<object>(result)-程序员宅基地

Table of Contentsslpi上是怎样建立一个环境去运行chrechre::init()SingletonchreThreadEntry​​​​创建SocketClient 通过socket: chre和slpi_chre通信socketClient的创建和链接1 构造函数2 connect2.2 receiveThread2.3 有关ca..._return reinterpret_steal(result)

微服务架构实战篇(三):Spring boot2.0 + Mybatis + PageHelper实现增删改查和分页查询功能-程序员宅基地

简介该项目主要利用Spring boot2.0 +Mybatis + PageHelper实现增删改查和分页查询功能,快速搭建一套和数据库交互的项目。源码地址 GitHub:https://github.com/yundianzixun/Spring-boot2.0-Mybatis-PageHelper 联盟公众号:IT实战联盟 我们社区:https://100boot.cn小...

仪表盘Agauge的外观控制_basearcradius-程序员宅基地

在做上位机时,使用了Agauge这个控件,一直对其属性了解的不是很透彻,本次通过研究,对其外观属性有了较深刻的了解:首先,其大小的控制:size,size设置后可能出现如下问题:一、中心不对称此时需要设置Cnter属性,例如本例中将center设置为85,85中心正确。如下图:二、文字超出图形外如上图,表刻度文字超出中心外,此时可设置ScaleNumbersRadius属性使文字靠圆心内部,本例由95调整为70后如下图:三、步长太密或太稀疏如上图,步长太密了,导致后面_basearcradius

10年老兵给程序员的10条建议!_10年前的建议-程序员宅基地

程序员虽然薪资待遇好,但是也得付出努力,技术好才行。特别是对于刚刚进入编程工作的新手程序员和正在学习编程的同学来说,一写代码就报错,出bug。作为一个工作了10年+的老兵,总结了下面10条建议送给程序员。1. 想清楚,再动手写代码刚入行的新手,为了展示自己的能力,拿到需求迫不及待地就开始上手写代码,大忌!2. 不交流,就会头破血流不爱说话和沟通,需求都理解错误了,最后做_10年前的建议

Android 蓝牙( Bluetooth)耳机连接分析及实现-程序员宅基地

Android 实现了对Headset 和Handsfree 两种profile 的支持。其实现核心是BluetoothHeadsetService,在PhoneApp 创建的时候会启动它。 if (getSystemService(Context.BLUETOOTH_SERVICE) != null) { mBtHandsfree = new Blueto...

layUI使用方法_legui怎么用-程序员宅基地

一.1.layui模块化使用:如果你使用的是layui,那么你直接在官网下载layui框架即可,无需引入Query和layer.js,但需要引入layui.css和layui.js。调用方式:通过layui.use(‘layer’,callback)加载和初始化layer模块。2.作为独立组件使用,如果你只是想使用的是layer,你可以去layer独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本,并引入layer.js。调用方式:通过script标签引入layer后,直接_legui怎么用

推荐文章

热门文章

相关标签