Golang实现HTML中复选框选中时显示/隐藏div

Golang实现HTML中复选框选中时显示/隐藏div 我向自己提出了以下问题：使用接口我们可以填充下拉菜单，但是我们能否完全用Go语言实现这段代码

<!DOCTYPE html>
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
</head>
<body> 
<script type="text/javascript">
$(document).ready(function () {
    $("#chk").click(function () {
        if ($(this).is(":checked")) {
            $("#dvS").show();
        } else {
            $("#dvPassport").hide();
        }
    });
});
</script>
<div class="checkbox">
<br>
<label style="padding-right:0px;"><input type="checkbox" name="cod" value="1" id="chk"> My shop  
<b>Candy</b></label>
</div>

 <select name="" id="dvS" style="display: none">
      <option value="">caramel</option>
      <option value="">lollipop</option>
      <option value="">Chocolat</option>
  </select>

感谢您对初学者的建议和帮助


更多关于Golang实现HTML中复选框选中时显示/隐藏div的实战教程也可以访问 https://www.itying.com/category-94-b0.html

5 回复

或者你也可以使用 Angular 来实现（尽管这有些大材小用）。

更多关于Golang实现HTML中复选框选中时显示/隐藏div的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html


感谢您的回答，抱歉我的英语表达不够准确，但主要意思已经表达清楚了

我确信问题是能否摆脱jquery/javascript，只用go来显示和隐藏div元素。

我想不出简单的方法来实现这一点。

问题是，我们能否在不使用jQuery或JavaScript的情况下实现if else条件判断？

// 示例代码
if condition {
    // 条件成立时执行
} else {
    // 条件不成立时执行
}

在Go语言中，你可以使用html/template包来生成包含动态行为的HTML页面，但需要注意的是，Go本身是服务器端语言，无法直接处理客户端的交互（如复选框的点击事件）。不过，你可以通过Go生成包含JavaScript代码的HTML，从而实现复选框选中时显示或隐藏div的功能。以下是一个完整的示例，展示如何使用Go语言编写一个HTTP服务器，生成包含所需交互逻辑的HTML页面。

首先，创建一个Go程序，设置HTTP路由，并使用模板来渲染HTML内容。在HTML中嵌入JavaScript代码来处理复选框的事件。

示例代码：

  1. 创建Go文件（例如 main.go）：
package main

import (
    "html/template"
    "net/http"
)

func main() {
    http.HandleFunc("/", homeHandler)
    http.ListenAndServe(":8080", nil)
}

func homeHandler(w http.ResponseWriter, r *http.Request) {
    tmpl := template.Must(template.New("index").Parse(htmlTemplate))
    tmpl.Execute(w, nil)
}

const htmlTemplate = `
<!DOCTYPE html>
<html>
<head>
    <title>Checkbox Show/Hide Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#chk").click(function () {
                if ($(this).is(":checked")) {
                    $("#dvS").show();
                } else {
                    $("#dvS").hide();
                }
            });
        });
    </script>
    <div class="checkbox">
        <br>
        <label style="padding-right:0px;">
            <input type="checkbox" name="cod" value="1" id="chk"> My shop  
            <b>Candy</b>
        </label>
    </div>
    <select name="" id="dvS" style="display: none">
        <option value="">caramel</option>
        <option value="">lollipop</option>
        <option value="">Chocolat</option>
    </select>
</body>
</html>
`
  1. 运行程序：

在终端中执行以下命令启动服务器：

go run main.go
  1. 访问页面：

打开浏览器，访问 http://localhost:8080。当选中复选框时，下拉菜单会显示；取消选中时，下拉菜单会隐藏。

解释：

  • 这个Go程序启动了一个HTTP服务器，监听8080端口。
  • 当访问根路径（"/"）时，服务器使用html/template包渲染一个HTML页面。
  • HTML页面中嵌入了JavaScript代码（使用jQuery），处理复选框的点击事件，并根据选中状态显示或隐藏ID为dvS的下拉菜单。
  • 注意：原始代码中有一个错误，在隐藏时使用了#dvPassport，但实际元素ID是#dvS。我已修正为#dvS以保持一致。

通过这种方式，你可以用Go语言生成包含动态客户端行为的HTML页面。如果需要更复杂的交互，可以考虑结合Go后端API和前端JavaScript框架（如React或Vue.js）。

回到顶部