<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-08-14 12:25:25 浏览: 59
可以通过 JavaScript 实现当送货上门被选中时,送货地址为必填项的功能。以下是一个简单的实现方式:
```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>
const deliveryRadio = document.getElementById("d1");
const addressInput = document.getElementById("addr");
const pickupMessage = document.getElementById("pickup");
deliveryRadio.addEventListener("change", () => {
if (deliveryRadio.checked) {
addressInput.required = true;
pickupMessage.style.display = "none";
} else {
addressInput.required = false;
pickupMessage.style.display = "block";
}
});
</script>
</body>
```
上述代码中,我们首先获取了送货上门和送货地址的两个元素,然后通过 `addEventListener` 方法监听送货上门单选框的 `change` 事件。当送货上门被选中时,我们将 `addressInput` 设置为必填项,同时将 `pickupMessage` 隐藏。当快递点自提被选中时,我们将 `addressInput` 设置为非必填项,同时显示 `pickupMessage`。
相关推荐
![application/msword](https://img-home.csdnimg.cn/images/20210720083327.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
帮我补充这段代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>外卖订餐网站首页</title> </head> <body>
首页 菜单 关于我们 联系我们
推荐菜品
菜品名称 菜品描述 ¥50
菜品名称 菜品描述 ¥60
菜品名称 菜品描述 ¥70 下单 <form> <label for="name">姓名</label> <input type="text" id="name"> <label for="phone">电话</label> <input type="tel" id="phone"> <label for="address">地址</label> <input type="text" id="address"> <label for="dish">菜品</label> <select id="dish"> <option value="1">菜品1</option> <option value="2">菜品2</option> <option value="3">菜品3</option> </select> <button type="submit">提交订单</button> </form> </body> </html>添加左边导航栏和广告浮动窗口,请给我html和css的源代码
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
請你幫我美化重新佈局這段代碼<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>异常记录</title> <style> </style> </head> <body> 首页 登记数据 查询数据 异常记录登记 <form method="post" action="/submit"> <label>确认线别:</label> <input type="text" name="line"> <label>确认日期:</label> <input type="date" name="date"> <label>异常机种:</label> <input type="text" name="model"> <label>异常现象:</label> <input type="text" name="prod_line"> <label>生产日期:</label> <input type="date" name="prod_date"> <label>生产班别:</label> <input type="text" name="shift"> <label>生产线别:</label> <input type="text" name="prod_line"> <label>责任人:</label> <input type="text" name="responsible"> <input type="submit" value="提交"> </form> </body> </html>
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
根据这个页面制作一个js完善功能<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物车</title> <script src="script.js"></script> </head> <body> 欢迎来到我们的网站! 首页 商品 购物车 登录 <main> 购物车
商品1 价格:100元 <form> <label for="quantity1">数量:</label> <input type="number" id="quantity1" min="1" value="1"> <button type="submit">更新</button> </form> <button class="remove">删除</button>
商品2 价格:200元 <form> <label for="quantity2">数量:</label> <input type="number" id="quantity2" min="1" value="1"> <button type="submit">更新</button> </form> <button class="remove">删除</button> 总价:300元 <button id="checkout">结算</button> </main> </body> </html>
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)