用jquery实现：<body> <form action="3.html"> <h2>确认收货信息</h2> <p> <input id="d1" name="c1" type="radio" value="1" checked />送货上门 <input id="d2" name="c1" type="radio" value="2"/>快递点自提 </p> <p> <span>请填写详细的送货地址<input type="text" id="addr"/></span> <span>请到马鞍山路40号菜鸟物流快递点自提</span> </p> <p> <button>确定</button> </p> </form> </body>这是我html页面内容，实现当送货上门被选中时，送货地址为必填项

时间: 2023-07-19 17:24:23 浏览: 48
可以使用 jQuery 实现当送货上门被选中时，送货地址为必填项的功能。以下是一个实现方式： ```html <body> <form action="3.html"> <h2>确认收货信息</h2> <p> <input id="d1" name="c1" type="radio" value="1" checked />送货上门 <input id="d2" name="c1" type="radio" value="2"/>快递点自提 </p> <p> <span>请填写详细的送货地址</span> <input type="text" id="addr"/> <span id="pickup" style="display: none">请到马鞍山路40号菜鸟物流快递点自提</span> </p> <p> <button>确定</button> </p> </form> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function() { const deliveryRadio = $("#d1"); const addressInput = $("#addr"); const pickupMessage = $("#pickup"); deliveryRadio.change(function() { if (deliveryRadio.is(":checked")) { addressInput.prop("required", true); pickupMessage.hide(); } else { addressInput.prop("required", false); pickupMessage.show(); } }); }); </script> </body> ``` 上述代码中，我们首先引入了 jQuery 库，并在 `$(document).ready()` 函数中执行了代码。然后，我们使用 `$` 符号获取了送货上门和送货地址的两个元素。通过 `change()` 方法监听送货上门单选框的 `change` 事件。当送货上门被选中时，我们将 `addressInput` 设置为必填项，同时将 `pickupMessage` 隐藏。当快递点自提被选中时，我们将 `addressInput` 设置为非必填项，同时显示 `pickupMessage`。

相关推荐

zip

Jquery实现的的动态无刷新的二级联动菜单

基于jquery的用<select>实现二级动态联动菜单，里面用到jquer+ajax+json解析方面知识，通过无刷新去后台值实现的，可用性非常好，欢迎大家下载学习。
zip

JQUERY选择器　id选择器
2)　　$('.class')　　css选择器,class类名

3)　$('element')　标签选择器，例如p,h1,div<br> <hr> 4)　$('*')　全选择器,可选择所有的html标签(影响范围较大甚用)<br> <hr> 5)　$('sele1,sele2')　用‘,'逗号隔开可以选择多个不同元素有相同效果的选择器<br> ...
text/plain

javascript中的用法与意思

很实用的方法，刚学的分享下！<script type="text/javascript">

留言板 <form action="qiandao.jsp" class="submit_box" onsubmit="submitForm(event)"> <textarea rows="5" cols="40" placeholder=" 发表......" name="area" class="area" id="myTextarea"> </textarea>
<sor>评分：<input type="text" name="sor"> </sor>

<button class="submit">发表</button> </form> 优化并给出改进后的代码

<label for="rating">评分：</label> <input type="number" name="rating" id="rating" min="1" max="5"> </div> <button type="submit">发表</button> </form> </section> <section class="content_box"> ...

<!DOCTYPE html> <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml"> <head> <title>register</title> <script th:src="@{/js/jquery-2.1.1.min.js}" type="text/javascript"></script> <script th:src="@{/js/vue.min.js}" type="text/javascript"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <title>登录表单</title> <meta name="keywords" content="登录表单"/> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> </head> <body> 注册表单 注 册 <form action="#" method="post"> <input type="text" Name="Name" placeholder="用户名" required=""> <input type="text" Name="Email" placeholder="邮箱" required=""> <input type="password" Name="Password" placeholder="密码" required=""> <input type="text" Name="Phone Number" placeholder="手机号码" required=""> </form> <button @click="turnToRegister">注册</button> <script> //新建一个Vue对象。 new Vue({ //绑定作用域 el: "#app", //绑定数据 data: {//双向绑定数据 user: { name: "", password: "", } }, //绑定方法； methods: { addOne() { //适用ajax进行数据交互 $.ajax({ url: "/user/insertOne",//请求的路径 type: "post",//请求的方式 data: { name: this.user.name,//获取user里面的数据并且进行绑定； password: this.user.password, }, //返回数据的格式 dataType: "json", //成功返回方式 success: function (rs) { if (rs.status == 200) {//rs获取状态码看是否成功 layer.alert(rs.msg, {icon: 6}, function () { //获取ifram层的窗口名 var frameIndex = parent.layer.getFrameIndex(window.name); parent.layer.close(frameIndex); parent.location.reload() location.href="/login" }) } else { layer.alert(rs.msg, {icon: 5}, function () { //获取ifram层的窗口名 var frameIndex = parent.layer.getFrameIndex(window.name); parent.layer.close(frameIndex); }) } } }) } } }) </script> </body> </html> 帮我以上代码实现注册功能成功后，新增一个小弹窗，弹窗内容是注册成功

<link rel="stylesheet" href="/./css/style.css" type="text/css" > </head> <body> <h1>注册表单</h1> <div class="container w3layouts agileits"> <div class="register w3layouts agileits" id="app"> <h2...

HTML+CSS+jQuery实现平滑动画的代码示例

<label for="message">Message:</label> <textarea id="message" name="message" required></textarea> <button type="submit">Send Message</button> </form> </section> </main> ...

校园表白墙的首页代码，用HTML+jquery+mysql实现

以下是校园表白墙的首页代码，使用了 HTML、jQuery 和 MySQL 实现： html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>校园表白墙</title> <script src=...

下一步，在index.jsp文件中，添加相应请求链接。下一步，在实体类中增加一个数组属性private float[] scores;，用于存放所选课程的成绩。请修改add_student.jsp、StudentController.java以及student_info.jsp等文件，确保可以输入所选课程成绩，并在提交后正确显示。下一步，在pom.xml文件中添加JSON依赖。下一步，在webapp目录中创建js文件夹，将jquery-1.11.3.min.js文件复制到js中。下一步，修改spring-mvc.xml文件，加入mvc相关内容。下一步，在WEB-INF/pages/book目录中，创建book_list.jsp文件，用于显示和添加book信息如书名，出版社，价格。要求<title>为"测试Json"，最后，在index.jsp中添加请求链接。

成绩3：<input type="text" name="scores[2]"><br> <input type="submit" value="提交"> </form> 4. 修改StudentController.java，将scores属性也加入到Student对象中，并在addStudent方法中获取scores数组。...

用Java写一个电子邮件收发系统的登录html代码

<label for="email">电子邮件地址:</label> <input type="email" class="form-control" id="email" placeholder="请输入电子邮件地址" name="email" required> </div> <div class="form-group"> ...

代码实现一个基于Spring boot + Mybatis-Plus+JQUERY+Bootstrap 的留言板

<form action="/add" method="post"> <div class="mb-3"> <label for="name" class="form-label">姓名</label> <input type="text" class="form-control" id="name" name="name"> </div> <div class="mb-3"> ...

用JSP+Servlet设计一个美食网站，index.jsp里面有一个导航栏，导航栏选项分别是附近美食、小吃快餐、饮品甜点、上榜好店、聚餐宴请分别跳转到对应的jsp页面，login.jsp用form表单实现登录和注册功能

首先，我们需要创建一个web项目，然后在web项目下创建3个JSP页面：index.jsp、nearby.jsp、snacks.jsp、drinks.jsp、top.jsp、login.jsp。 index.jsp页面中，我们可以使用Bootstrap框架来实现导航栏和页面布局。...

用WEB--ASP.NET谢一个登入页面

<label for="username">Username:</label> <input type="text" class="form-control" id="username" placeholder="Enter username" name="username"> </div> <div class="form-group"> ...

4. 编写程序，实现多文件上传。表单页面可以考虑用JQUERY实现不固定数量的文件上传框。文件名multiplefiles.html、upload.php。利用函数封装多文件上传操作，以实现函数的重复利用。（可以在网上搜索一下代码）

echo '<p>上传成功的文件：</p>'; echo '<ul>'; foreach($result['uploadedFiles'] as $file) { echo '<li>'.$file.'</li>'; } echo '</ul>'; } if(!empty($result['errors'])) { echo '<p>上传...

jquery实现登录注册页面

<form action="#"> <h1>Create Account</h1> <input type="text" placeholder="Name" /> <input type="email" placeholder="Email" /> <input type="password" placeholder="Password" /> ...

jQuery用户注册界面代码

<label>邮箱：</label> <input type="email" name="email" id="email" required><br><br> <label>手机号码：</label> <input type="tel" name="phone" id="phone" required><br><br> <label>验证码：</...

請你幫我完成HTML代碼

<textarea class="form-control" id="note" name="note" rows="3"></textarea> </div> <button type="submit" class="btn btn-primary">提交</button> </form> </div> </body> </html> query.html 页面...

用bootstrap写一个登陆页面

<form action="#" method="POST"> <div class="form-group"> <label for="username">用户名:</label> <input type="text" class="form-control" id="username" placeholder="请输入用户名" name=...

帮我实现一个漂亮的中文html登陆页面，支持token，后端是tornado

<form role="form" method="post" action="/login"> <div class="form-group"> <label for="username">用户名</label> <input type="text" class="form-control" id="username" name="username" placeholder="请...

写一段上述网站的登录界面代码

<form action="/login" method="POST"> <div class="form-group"> <label for="username">用户名:</label> <input type="text" class="form-control" id="username" placeholder="请输入用户名" name=...

最新推荐

recommend-type

zigbee-cluster-library-specification

最新的zigbee-cluster-library-specification说明文档。
recommend-type

管理建模和仿真的文件

管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
recommend-type

实现实时数据湖架构：Kafka与Hive集成

![实现实时数据湖架构：Kafka与Hive集成](https://img-blog.csdnimg.cn/img_convert/10eb2e6972b3b6086286fc64c0b3ee41.jpeg) # 1. 实时数据湖架构概述** 实时数据湖是一种现代数据管理架构，它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同，实时数据湖不依赖于预先定义的模式，而是采用灵活的架构，可以处理各种数据类型和格式。这种架构为企业提供了以下优势： - **实时洞察：**实时数据湖允许企业访问最新的数据，从而做出更明智的决策。 - **数据民主化：**实时数据湖使各种利益相关者都可
recommend-type

解释minorization-maximization (MM) algorithm，并给出matlab代码编写的例子

Minorization-maximization (MM) algorithm是一种常用的优化算法，用于求解非凸问题或含有约束的优化问题。该算法的基本思想是通过构造一个凸下界函数来逼近原问题，然后通过求解凸下界函数的最优解来逼近原问题的最优解。具体步骤如下： 1. 初始化参数 $\theta_0$，设 $k=0$； 2. 构造一个凸下界函数 $Q(\theta|\theta_k)$，使其满足 $Q(\theta_k|\theta_k)=f(\theta_k)$； 3. 求解 $Q(\theta|\theta_k)$ 的最优值 $\theta_{k+1}=\arg\min_\theta Q(
recommend-type

JSBSim Reference Manual

JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。
recommend-type

"互动学习：行动中的多样性与论文攻读经历"

多样性她- 事实上SCI NCES你的时间表ECOLEDO C Tora SC和NCESPOUR l’Ingén学习互动，互动学习以行动为中心的强化学习学会互动，互动学习，以行动为中心的强化学习计算机科学博士论文于2021年9月28日在Villeneuve d'Asq公开支持马修·瑟林评审团主席法布里斯·勒菲弗尔阿维尼翁大学教授论文指导奥利维尔·皮耶昆谷歌研究教授：智囊团论文联合主任菲利普·普雷教授，大学。里尔/CRISTAL/因里亚报告员奥利维耶·西格德索邦大学报告员卢多维奇·德诺耶教授，Facebook /索邦大学审查员越南圣迈IMT Atlantic高级讲师邀请弗洛里安·斯特鲁布博士，Deepmind对于那些及时看到自己错误的人...3谢谢你首先，我要感谢我的两位博士生导师Olivier和Philippe。奥利维尔，"站在巨人的肩膀上"这句话对你来说完全有意义了。从科学上讲，你知道在这篇论文的（许多）错误中，你是我可以依
recommend-type

实现实时监控告警系统：Kafka与Grafana整合

![实现实时监控告警系统：Kafka与Grafana整合](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9BVldpY3ladXVDbEZpY1pLWmw2bUVaWXFUcEdLT1VDdkxRSmQxZXB5R1lxaWNlUjA2c0hFek5Qc3FyRktudFF1VDMxQVl3QTRXV2lhSWFRMEFRc0I1cW1ZOGcvNjQw?x-oss-process=image/format,png) # 1.1 Kafka集群架构 Kafka集群由多个称为代理的服务器组成，这
recommend-type

帮我实现在Androidstudio调用chapgpt并提供源码

首先，你需要运行一个ChitGPT的服务器，然后通过Android应用程序与该服务器进行通信。以下是一个简单的Android应用程序示例，可以与ChitGPT进行通信： 1. 首先，在Android Studio中创建一个新的项目，并添加以下依赖项： ``` implementation 'com.squareup.okhttp3:okhttp:4.9.0' implementation 'com.google.code.gson:gson:2.8.6' ``` 2. 创建一个新的Java类，用于与ChitGPT服务器通信。以下是一个简单的实现： ```java import com.
recommend-type

c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf

校园超市商品信息管理系统课程设计旨在帮助学生深入理解程序设计的基础知识，同时锻炼他们的实际操作能力。通过设计和实现一个校园超市商品信息管理系统，学生掌握了如何利用计算机科学与技术知识解决实际问题的能力。在课程设计过程中，学生需要对超市商品和销售员的关系进行有效管理，使系统功能更全面、实用，从而提高用户体验和便利性。 学生在课程设计过程中展现了积极的学习态度和纪律，没有缺勤情况，演示过程流畅且作品具有很强的使用价值。设计报告完整详细，展现了对问题的深入思考和解决能力。在答辩环节中，学生能够自信地回答问题，展示出扎实的专业知识和逻辑思维能力。教师对学生的表现予以肯定，认为学生在课程设计中表现出色，值得称赞。 整个课程设计过程包括平时成绩、报告成绩和演示与答辩成绩三个部分，其中平时表现占比20%，报告成绩占比40%，演示与答辩成绩占比40%。通过这三个部分的综合评定，最终为学生总成绩提供参考。总评分以百分制计算，全面评估学生在课程设计中的各项表现，最终为学生提供综合评价和反馈意见。 通过校园超市商品信息管理系统课程设计，学生不仅提升了对程序设计基础知识的理解与应用能力，同时也增强了团队协作和沟通能力。这一过程旨在培养学生综合运用技术解决问题的能力，为其未来的专业发展打下坚实基础。学生在进行校园超市商品信息管理系统课程设计过程中，不仅获得了理论知识的提升，同时也锻炼了实践能力和创新思维，为其未来的职业发展奠定了坚实基础。 校园超市商品信息管理系统课程设计的目的在于促进学生对程序设计基础知识的深入理解与掌握，同时培养学生解决实际问题的能力。通过对系统功能和用户需求的全面考量，学生设计了一个实用、高效的校园超市商品信息管理系统，为用户提供了更便捷、更高效的管理和使用体验。 综上所述，校园超市商品信息管理系统课程设计是一项旨在提升学生综合能力和实践技能的重要教学活动。通过此次设计，学生不仅深化了对程序设计基础知识的理解，还培养了解决实际问题的能力和团队合作精神。这一过程将为学生未来的专业发展提供坚实基础，使其在实际工作中能够胜任更多挑战。
recommend-type

关系数据表示学习

关系数据卢多维奇·多斯桑托斯引用此版本：卢多维奇·多斯桑托斯。关系数据的表示学习机器学习[cs.LG]。皮埃尔和玛丽·居里大学-巴黎第六大学，2017年。英语。NNT：2017PA066480。电话：01803188HAL ID：电话：01803188https://theses.hal.science/tel-01803188提交日期：2018年HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaireUNIVERSITY PIERRE和 MARIE CURIE计算机科学、电信和电子学博士学院（巴黎）巴黎6号计算机科学实验室D八角形T HESIS关系数据表示学习作者：Ludovic DOS SAntos主管：Patrick GALLINARI联合主管：本杰明·P·伊沃瓦斯基为满足计算机科学博士学位的要求而提交的论文评审团成员：先生蒂埃里·A·退休记者先生尤尼斯·B·恩