带有三个按钮的javascript确认按钮
带有三个按钮的 JavaScript 确认按钮是一种常见的前端开发需求，用于在用户进行某些操作时弹出确认对话框，并提供三个不同的选项供用户选择。
这种确认按钮通常使用 JavaScript 的 confirm() 方法来实现。confirm() 方法会弹出一个对话框，其中包含一个文本消息和两个按钮：“确定”和“取消”。用户可以点击“确定”按钮来确认操作，或者点击“取消”按钮来取消操作。
为了实现带有三个按钮的确认按钮，我们可以使用一些前端技巧和自定义样式来模拟这个效果。以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>带有三个按钮的确认按钮</title>
<style>
.button {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
text-align: center;
text-decoration: none;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.button-primary {
background-color: #008CBA;
}
.button-danger {
background-color: #f44336;
}
</style>
</head>
<body>
<h2>带有三个按钮的确认按钮</h2>
<button class="button" onclick="confirmAction('Option 1')">Option 1</button>
<button class="button button-primary" onclick="confirmAction('Option 2')">Option 2</button>
<button class="button button-danger" onclick="confirmAction('Option 3')">Option 3</button>
<script>
function confirmAction(option) {
if (confirm("确认执行选项：" + option + " 吗？")) {
// 用户点击了“确定”按钮
// 在这里执行相应的操作
console.log("执行选项：" + option);
} else {
// 用户点击了“取消”按钮
// 在这里执行相应的操作
console.log("取消执行选项：" + option);
}
}
</script>
</body>
</html>在上述示例代码中，我们创建了三个按钮，分别代表三个选项。每个按钮都绑定了一个 onclick 事件，当用户点击按钮时，会调用 confirmAction() 函数。
confirmAction() 函数会弹出一个确认对话框，其中包含选项的信息。如果用户点击了“确定”按钮，就会执行相应的操作；如果用户点击了“取消”按钮，就会执行相应的操作。
这种带有三个按钮的确认按钮可以应用于各种场景，例如在删除操作时提供三个不同的删除选项，或者在提交表单时提供三个不同的提交选项。
腾讯云提供了一系列的云计算产品，其中包括云服务器、云数据库、云存储等。您可以根据具体需求选择适合的产品。更多关于腾讯云产品的信息，请访问腾讯云官方网站：腾讯云。
相关·内容
如何在不使用任何html代码的情况下创建一个带有三个按钮的功能确认JavaScript？JavaScript函数将是来自另一个系统的调用者，因此我可以只使用js函数，而不需要任何html或jQuery。
浏览 15提问于2017-08-30得票数 0
我通过JavaScript显示了一个确认警告框： if (hdnval.toLowerCase() !valid') { } { }}
确认警告显示时有两个按钮我想在确认警告中显示第三个按钮。我希望这三个按钮是这
浏览 0提问于2012-02-01得票数 33
回答已采纳
好吧，Javascript确认给出了Ok/Cancel按钮，但我想在Javascript中创建一个带有Yes和No的确认按钮。有人能帮我吗?？
浏览 0提问于2010-10-18得票数 3
回答已采纳
我试图实现一个后退按钮到我正在设计的表单，当按下时，在确认弹出窗口，允许用户选择确定或取消。到目前为止，我对这个按钮的代码如下所示。window.history.back();<button type="back" value="back" onclick="goBack()">Back</button>
我遇到的问题是表单的大多数元素都是按要求设置的</
浏览 2提问于2016-02-08得票数 0
3回答
找不到WindowID
、、、
我一直有一个问题，当一个提交按钮被点击时会出现一个弹出窗口。此时将显示确认窗口，其中只有一个“确定”选项。我也尝试过将'chooseOKonnextConfirmation‘和.getConfirmation结合使用，但是eclipse告诉我不存在确认。谁能告诉我如何检索windowID和我需要实现的相关API命令来解决这个问题？
浏览 1提问于2011-06-29得票数 0
我不知道为什么每当您选择value="1"和ng-value="true"按钮中的一个时，这两个按钮都被选中。
浏览 1提问于2016-07-19得票数 2
5回答
Asp.Net中的确认框
、、、、
// proceed further... } catch()}但是，我想在某些情况下打开弹出窗口。当它打开时，不应该执行进一步的代码，除非我单击该确认框的OK/Cancel按钮
浏览 1提问于2015-06-10得票数 2
3回答
在JavaScript中，在单击“是”或“否”按钮时，它们有返回真或假的确认对话框。if (confirm('Your question')) { }在jQuery<em
浏览 4提问于2014-09-21得票数 6
回答已采纳
1回答
我的代码是working.But，当确认框出现时，我按下"ok“按钮，然后按下数字和它的working.But，如果我按下"cancel”按钮，放置数字，然后什么都不会发生。
浏览 0提问于2019-08-13得票数 0
回答已采纳
3回答
我是使用.NET进行web编程的新手。有人能告诉我一个简单的方法来得到我想要的东西吗？我不能理解web编程中如此常见的事情，PHP + javascript不会带来任何问题，为什么会如此复杂。所有这
浏览 2提问于2017-07-18得票数 2
1回答
我是MVC3的新手，我不懂如何使用复选框。在我的模型中，我有一个服务列表和一个可用服务列表。这个想法是显示所有可用的服务，并让用户选择使用哪一次，选中相应的复选框。Service, bool> ServicesChecklist { get; set; }
我能够使用控制器私有字典AssignServiceToActivity(Activity activity)的私有方法正确加载服务表
浏览 5提问于2013-04-20得票数 3
我有一个带有按钮的页面，单击它时，它将异步执行很长时间的任务。我尝试使用javascript在该按钮上实现验证，单击该按钮时将弹出一个确认对话框。但是，当我在“确认”对话框中单击“取消”时，将仍然执行长时间任务，而不是返回false。btnPrint.Attributes.Add("onclick", "javascri
浏览 7提问于2009-12-22得票数 1
回答已采纳
return []; });当我打开页面时，没有任何搜索框，只有<div id="autocomplete"></div>是空的。
浏览 6提问于2022-02-03得票数 0
我正在调用navigator.notification.confirm，其中调用成功，并且我可以看到确认消息框，但回调事件不会在点击退出按钮时触发。我在android上使用的是phonegap 3.3。下面是我的index.html中的代码： console.log('DeviceReady'); 'Connection Status&#x
浏览 0提问于2014-02-03得票数 0
如何将PayPal立即购买按钮添加到我的Facebook活动页面？我有代码，但不知道把它放在哪里？
浏览 1提问于2012-02-17得票数 0
在javascript中，引导我显示一个带有按钮的确认框，例如"Yes“和"No”，而不是"Ok“和"Cancel”。
先谢谢你...
浏览 0提问于2011-03-10得票数 2
我从html表单中获取值，在php中做一些操作，并更新mysql表的记录。在更新之前，我要求用户使用javascript进行“确认”。如果用户按下“取消”，我不想更新记录。我尝试过以下几种方法：<script type=text/javascript>
var to_disp = <?但是，当移动到linux时，这不起作用，页面被重定向到前面提到的url，但记录也在更新。
浏览 2提问于2014-10-21得票数 1
在Selenium Java中，我很难单击带有"x“文本的Javascript:void(0)按钮。<a href="javascript:void(0);" class="aui-button aui-button-link aui-restfultable-delete aui-restfultable-delete-small" original-title="Delete resolved">x</a
浏览 18提问于2016-07-21得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
