今天开发代码时,发现好久不用jquery就生疏了。

所以作这个记录,

使用checkbox控制div的显示与隐藏。

一,html代码处:

<input type="checkbox" name="checkYaml" id="checkYaml" /> Yaml发布
<div  id="branch_build_div">
    {{ form.branch_build }}
</div>

二,JS代码处:

$(document).ready(function(){

    // 如果是Yaml发布,用户就不用输入git的代码分支了,因为直接使用配置好的yaml文件,连编译镜像都不需要的。
    $("#checkYaml").change(function() {
        if ($("#checkYaml").prop("checked")) {
            $("#branch_build_div").hide();
        } else {
            $("#branch_build_div").show();
        }

    });
});

三,如果是在django的formview中,使用如下方式,可以获取这个额外的form选项(因为这个checkbox并没有反映在forms.Form继承类中)。

def form_valid(self, form):
    check_yaml = self.request.POST.get('checkYaml')

简简单单,jquery中,使用checkbox控制div的显示与隐藏的更多相关文章

  1. jquery实现点击控制div的显示和隐藏

    我们使用点击显示.点击隐藏的时候,一般有两种可选方案 .示例 html <div class="index"> <h1> 首页 </h1> &l ...

  2. 原生JS的移入溢出控制div的显示与隐藏

    原生JS的移入溢出控制div的显示与隐藏的写法 上面的写法火狐存在兼容性

  3. js控制div样式显示与隐藏,JS通过点击超链接右边(指定位置)显示一个图标

    原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...

  4. jquery控制css的display(控制元素的显示与隐藏)

    使用jquery控制div的显示与隐藏: $("#div的id").show()表示display:block, $("#div的id").hide()表示di ...

  5. jquery控制元素的显示与隐藏

    比如要控制div的显示与隐藏,一句话就搞定了.$("#id").show()表示display:block,$("#id").hide()表示display:n ...

  6. jquery中选择checkbox拼接成字符串,然后到后台拆分取值

    jquery中选择checkbox拼接成字符串,然后到后台拆分取值 js中的代码 $("#btn").click(function(){ var chenked=$("i ...

  7. jquery怎么实现点击一个按钮控制一个div的显示和隐藏

    示例html 1 2 <div class="abc" style="display:none"></div> <input ty ...

  8. js 控制Div循环显示 非插件版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jQuery判断当前元素显示状态并控制元素的显示与隐藏

    1.jQuery判断一个元素当前状态是显示还是隐藏 $("#id").is(':visible');   //true为显示,false为隐藏 $("#id") ...

随机推荐

  1. StringBuild

    * StringBuild 初始容量是 32 * 1.属性: * Length:现有内容长度: * Capacity:StringBuild当前最大容量 * * 2. * 通过 设置Length=10 ...

  2. cookie、session、token的区别与联系

    https://www.cnblogs.com/moyand/p/9047978.html cookie.session.token存在意义 http协议是无状态协议,请求之间是没有联系的,cooki ...

  3. aa:function()和function aa()

    1.function aa() function aa()是定义的函数 function aa(){var a=5;}var c = aa(); //aa函数已经执行完,c 代表bb变量并没有被收回 ...

  4. Python实现网络图形化界面多人聊天室 - Windows

    Python实现网络图形化界面多人聊天室 - Windows 项目名称:网络多人聊天室图形界面版本 项目思路: server.py 服务端文件,主进程中,创建图形化界面,询问地址(主机名,端口),点击 ...

  5. Spark学习笔记01-基础

    目录 简介 特性 Spark运行模式 Mac本地安装 本文基于 Spark 2.4.1 进行演示,相关代码可以在我的Github上看到. 简介 Spark是一个分布式集群计算系统,类似Hadoop提供 ...

  6. 用 PHP 函数变量数组改变代码结构

    项目越做越大,代码越来越乱,维护困难.原因很多吧.起初为了实现功能,并没有注重代码的结构,外包公司嘛.虽然公司的项目负责人一直考虑复用.封装,但是我觉得基本上没有达到想要的效果.因为整个代码中没有用到 ...

  7. oracle简单查询单词

    单词 释义 select 查询 from 从... where 条件查询 as 别名 not 取反 and 和 or 或者 between...and... 范围取值,包含边界 like 模糊查询 e ...

  8. Vue.js 源码分析(十八) 指令篇 v-for 指令详解

    我们可以用 v-for 指令基于一个数组or对象来渲染一个列表,有五种使用方法,如下: <!DOCTYPE html> <html lang="en"> & ...

  9. 如何当上Leader和六千个bug的系统

    在昨天的读书会上我分享了我是如何当上leader以及当上leader之后的体会.然后今天Sophie总结了我的发言,大家对此有些反馈.我根据大家的反馈写了这篇文章,主要针对几点: 大家如何当上lead ...

  10. VM1059 bootstrap-table.min.js:7 Uncaught TypeError: Cannot read property 'classes' of undefined

    参考链接:https://blog.csdn.net/liuqianspq/article/details/81868283 1.阳光明媚的下午,我在写CRUD,让数据传到前端的时候,解析的时候报错了 ...