简简单单,jquery中,使用checkbox控制div的显示与隐藏

今天开发代码时,发现好久不用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‘)

原文地址:https://www.cnblogs.com/aguncn/p/11351558.html

时间: 2024-07-30 11:11:25

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

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

我们使用点击显示.点击隐藏的时候,一般有两种可选方案 .示例 html <div class="index"> <h1> 首页 </h1> <button id="btn">点击</button> </div> 最简单的方法:toggle()   点击显示 h1 和 点击 隐藏 h1 $(function () { $("#btn").click(function () {

利用JavaScript通过单选框radio控制div的显示和隐藏

通过鼠标单击单选框的动作,实现某个div或多个div的显示和隐藏.实例如下: JavaScript代码如下: 1 function divClick(){ 2 3 var show = ""; 4 show = $("input[name='AdPrintMode']:checked").val(); 5 switch (show){ 6 case '1': 7 document.getElementById("img1").style.disp

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

原生JS的移入溢出控制div的显示与隐藏的写法 上面的写法火狐存在兼容性 原文地址:https://www.cnblogs.com/malong1992/p/11783639.html

js封装函数控制div的显示与隐藏

<div id="test"></div> JS: <script> function ShowDivBoxOrNot(objName, bShow) { if (bShow == true) { document.getElementById(test).style.display = "block"; } else { document.getElementById(test).style.display = "no

jquery实现的div的显示和隐藏效果

jquery实现的div的显示和隐藏效果:在网页的实际应用中,有些模块需要根据需要显示或者隐藏,下面就提供了几个这方面的实例,代码非常的简单,都是使用jquery自带的函数实现的,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>div隐藏显示效果</title> <style type="text/css&qu

js控制div是否显示

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> body,ul,li{ padding:0; margin:0} li { list-style:none; } .lis { wi

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

1.jQuery判断一个元素当前状态是显示还是隐藏 $("#id").is(':visible');   //true为显示,false为隐藏 $("#id").is(':hidden');   //true为隐藏,false为显示 if($("#id").is(':hidden')){ //逻辑代码 } 2.jQuery控制css的display $("#id").show();    //表示display:block $

使用CSS3动画 animation 来控制元素的显示和隐藏

CSS3中 animation 和 transition 俩样式都能创建动画效果,而且是后台C++执行的,所以效率比普通jQuery的js模拟动画的效率高很多,所以建议大家能用css实现的效果都用css. transition的使用比较简单,这里就不介绍了,着重为大家介绍下 animation . animation 的css属性有很多,本文通过 animation-name 来控制启动动画和转换动画,以下是一个通过 animation 来控制元素的显示和隐藏的例子(仅支持webkit): <!

jQuery将物体居中,并且转换显示和隐藏

今天来给大家贴一段代码,代码的作用就是利用jQuery将物体居中,并且转换显示和隐藏: 首先建立一个div标签并且写好css样式,具体如下 然后我想要的效果是当我点击了button这个按钮,test可以居中显示,第二次点击一次test消失,第三次点击又居中显示,这样循环下去: 具体js代码如下: 稍微解释一下代码的意思: 1.$('#test').get(0).flag = true;是为了建立一个标识,告诉浏览器什么时候应该显示,什么时候应该隐藏 2.上面的top就是让浏览器窗口的高度减去自己