今天开发代码时,发现好久不用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. scrapy 爬取视频

    利用FilesPipeline 下载视频 1.setting.py # 保存log信息的文件名 LOG_LEVEL = "INFO" # LOG_STDOUT = True # L ...

  2. Java代码精进

    一.代码命名规范 驼峰命名法(CamelCase) Google 定义了以下的转换规则: 从正常的表达形式开始,把短语转换成 ASCII 码,并且移除单引号. 例如,“Müller’s algorit ...

  3. 基于C++的STL的vector实现静态链表,要求包含插入,删除,和查找功能

    //main.cpp部分 #include"List.cpp" int main() { StaticList<int> SL; SL.Insert(,); SL.In ...

  4. ARC082E ConvexScore(神奇思路)

    这题就是拼拼凑凑就出来了. 可能看英文题面容易题意杀(小写大写 \(n,N\)),这里复述一遍:对于每个构成凸多边形的点集(每个点恰好都是凸多边形的顶点,必须是严格的凸多边形,内角严格小于 180 度 ...

  5. vue_04 练习

    目录 vue_项目初始: car.vue Nav.vue: cardata.vue vue_项目初始: 1.Home.vue页面组件显示基本信息:欢迎来到汽车系统 Car.vue页面组件,完成Cars ...

  6. QAxBase: Error calling IDispatch member LineStyle: Unknown error

    word/Excel版本2007.2010.  wps也适用. //borders->dynamicCall("SetLineStyle(int,int,int)", 0, ...

  7. (二十三)golang--内置函数

    1.用于求长度,占多少个字节 2.内置函数new:分配内存,主要用来分配值类型,比如int.float等,其第一个实参为类型,而非值,其返回值为指向该类型的新分配的零值的指针: 3.make:用来分配 ...

  8. python-10-列表、元组嵌套

    前言 元组.列表前面章节有讲解实例,本节内容是列表.元组的多嵌套. 一.列表嵌套 1.列表嵌套操作1 # 列表的嵌套 li = ['xiaolong', '小林', ['小龙', 'xiaol'], ...

  9. 更改hosts文件解决 Git无法连接到github

    问题描述 inmeditation@sunlizhao MINGW64 ~/Desktop/hexob(1) $ ssh -T git@github.com ssh: connect to host ...

  10. vue数据更改视图不更新问题----深入响应式原理

    Vue响应式原理之官方解释 当你把一个普通的JavaScript对象传给Vue实例的data选项,Vue将遍历此对象所有的属性,并使用Object.defineProperty把这些属性全部转为get ...