如果没有JavaScript,我们可以通过其他方法来实现选择多个按钮的功能。以下是几种可能的解决方案:
<input>
元素中的type="checkbox"
来创建多个选择按钮,通过给每个按钮设置不同的value
属性来区分它们。用户可以通过点击按钮来选择或取消选择,然后在提交表单时,服务器端可以处理用户的选择。示例代码:
<form action="submit-page.html" method="post">
<label><input type="checkbox" name="option1" value="1"> 选项1</label>
<label><input type="checkbox" name="option2" value="2"> 选项2</label>
<label><input type="checkbox" name="option3" value="3"> 选项3</label>
<!-- 其他按钮... -->
<input type="submit" value="提交">
</form>
示例代码:
<style>
.selected {
background-color: yellow;
color: black;
}
</style>
<input type="button" value="按钮1" onclick="toggleButton(this)">
<input type="button" value="按钮2" onclick="toggleButton(this)">
<input type="button" value="按钮3" onclick="toggleButton(this)">
<script>
function toggleButton(button) {
button.classList.toggle('selected');
}
</script>
示例代码(使用PHP):
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if (isset($_POST['option1'])) {
// 选项1被选择
}
if (isset($_POST['option2'])) {
// 选项2被选择
}
if (isset($_POST['option3'])) {
// 选项3被选择
}
// 处理其他按钮...
}
?>
<form action="" method="post">
<label><input type="checkbox" name="option1" value="1"> 选项1</label>
<label><input type="checkbox" name="option2" value="2"> 选项2</label>
<label><input type="checkbox" name="option3" value="3"> 选项3</label>
<!-- 其他按钮... -->
<input type="submit" value="提交">
</form>
以上是在没有JavaScript的情况下,选择多个按钮的几种解决方案。这些解决方案可以根据具体的需求和场景选择使用。
云+社区技术沙龙[第13期]
云+社区技术沙龙[第10期]
技术创作101训练营
618音视频通信直播系列
DBTalk
2019腾讯云华北区互联网高峰论坛
技术创作101训练营
领取专属 10元无门槛券
手把手带您无忧上云