精华内容
下载资源
问答
  • 编写程序,通过复选框控件数组事先选择用户爱好信息的复选框,在该程序中,要求界面中的复选框数量可以根据指定复选框名称的字符串数组的长度来自动调节
  • 主要介绍的是通过js来制作复选框的全选和不选效果,需要的朋友可以参考下
  • 本文通过实例代码给大家介绍了JavaScript 通过Ajax 动态加载CheckBox复选框的方法,需要的朋友参考下吧
  • 标签:效果图layui复选框,一个主的复选框控制多个从复选框,主复选框和从复选框的颜色不一样layui复选框的样式,都是在选然后才会有的,所以直接通过css设置就实现不了了。只可以通过js动态设置html代码使用了...

    标签:

    效果图

    layui复选框,一个主的复选框控制多个从复选框,主复选框和从复选框的颜色不一样

    layui复选框的样式,都是在选然后才会有的,所以直接通过css设置就实现不了了。只可以通过js动态设置

    html代码使用了jfinal的模板

    *#(i18n.get('所属校区'))

    #for(campus : campusList)

    #end

    layui代码

    $(function(){

    layui.use('form', function(){

    var form = layui.form;

    form.on("checkbox(allCheck)", function(data){

    console.log(data);

    console.log(data.elem.checked);

    if (data.elem.checked) {

    //动态设置全选按钮颜色,不可以这里设置,这里设置后,前端选然后不会有效果的,

    //猜测原因是,form.render("checkbox"); 导致的,设置后layui又渲染了,把我自己设置的颜色覆盖了。所以设置需要在渲染后再设置,就等于是用我的css覆盖了layui的css

    $(".campus").each(function(){

    $(this).prop('checked', true);

    });

    } else {

    $(".campus").each(function(){

    $(this).prop('checked', false);

    });

    }

    form.render("checkbox");

    //渲染后设置我的颜色

    allCheckbox();

    });

    //查看是否被全选了,全选了,全选按钮编辑的时候就是被选中中状态

    function initselect(){

    let allSelect = true;

    $(".campus").each(function(index, elem){

    //每个checkbox添加点击事件,如果点击了,使得所有的按钮中出现了不被选中的,那么全选按钮就不被选中

    if($(this).prop('checked') == false){

    allSelect = false;

    }

    });

    console.log("是否全选",allSelect)

    $("#qx").prop('checked',allSelect);

    form.render("checkbox");

    //记得把设置事件放到渲染事件后

    allCheckbox();

    }

    initselect();

    //校区点击事件,如果有校区没有被选中,那么全选按钮就不能够显示选中状态

    form.on("checkbox(campus)", function(data){

    let checked = data.elem.checked;

    initselect();

    });

    });

    //全选按钮和其他按钮的颜色不一样

    function allCheckbox(){

    qx1=$('#qx').next('div').children('span');

    if($('#qx').prop('checked')){

    //被选中就设置颜色

    qx1.css({

    'background-color':'#e4393c'

    })

    }

    }

    //初始化设置全选按钮的颜色,

    allCheckbox();

    })

    css

    .layui-form-checkbox span {

    width:154px

    }

    .layui-unselect.layui-form-checkbox{

    margin-bottom:5px;

    }

    .layui-form-checkbox span{

    color:#4C5277;

    }

    .layui-form-checked span{

    color:#fff;

    }

    /*.layui-form-checked span{

    background-color:#b31717!important;

    }*/

    标签:

    来源: https://www.cnblogs.com/renjianjun/p/9989931.html

    展开全文
  • 通过勾选“全选/全不选”这个复选框,实现多个复选框的全选/全不选 1、“全选/全不选”复选框的代码: <td align="center" width="5%"><input type="checkbox" onclick="checkAll()" id="ckAll"/>全选/...

    通过勾选“全选/全不选”这个复选框,实现多个复选框的全选/全不选
    1、“全选/全不选”复选框的代码:

    <td align="center" width="5%"><input type="checkbox" onclick="checkAll()" id="ckAll"/>全选/全不选</td>

    2、其余多个复选框的代码:

    td align="center" width="5%"><input type="checkbox" name="ckBookId" /></td>

    3、js方法checkAll()的代码:

    	function checkAll() {
     //获取"ckAll"标签
        var ckAllTag = document.getElementById("ckAll");
        //获取"ckAll"标签的状态(是否勾选)
        var checkState = ckAllTag.checked;
        //获取所有书的复选框并封装到数组
        var ckBookIds = document.getElementsByName("ckBookId");
        for(var i = 0;i<ckBookIds.length;i++){
            ckBookIds[i].checked = checkState;
        }
    }
    展开全文
  • layui复选框:效果图layui复选框,一个主的复选框控制多个从复选框,主复选框和从复选框的颜色不一样layui复选框的样式,都是在选然后才会有的,所以直接通过css设置就实现不了了。只可以通过js动态设置html代码使用...

    layui复选框:

    效果图

    layui复选框,一个主的复选框控制多个从复选框,主复选框和从复选框的颜色不一样

    layui复选框的样式,都是在选然后才会有的,所以直接通过css设置就实现不了了。只可以通过js动态设置

    html代码使用了jfinal的模板

    *#(i18n.get('所属校区'))

    #for(campus : campusList)

    #end

    layui代码$(function(){

    layui.use('form', function(){

    var form = layui.form;

    form.on("checkbox(allCheck)", function(data){

    console.log(data);

    console.log(data.elem.checked);

    if (data.elem.checked) {

    //动态设置全选按钮颜色,不可以这里设置,这里设置后,前端选然后不会有效果的,

    //猜测原因是,form.render("checkbox"); 导致的,设置后layui又渲染了,把我自己设置的颜色覆盖了。所以设置需要在渲染后再设置,就等于是用我的css覆盖了layui的css

    $(".campus").each(function(){

    $(this).prop('checked', true);

    });

    } else {

    $(".campus").each(function(){

    $(this).prop('checked', false);

    });

    }

    form.render("checkbox");

    //渲染后设置我的颜色

    allCheckbox();

    });

    //查看是否被全选了,全选了,全选按钮编辑的时候就是被选中中状态

    function initselect(){

    let allSelect = true;

    $(".campus").each(function(index, elem){

    //每个checkbox添加点击事件,如果点击了,使得所有的按钮中出现了不被选中的,那么全选按钮就不被选中

    if($(this).prop('checked') == false){

    allSelect = false;

    }

    });

    console.log("是否全选",allSelect)

    $("#qx").prop('checked',allSelect);

    form.render("checkbox");

    //记得把设置事件放到渲染事件后

    allCheckbox();

    }

    initselect();

    //校区点击事件,如果有校区没有被选中,那么全选按钮就不能够显示选中状态

    form.on("checkbox(campus)", function(data){

    let checked = data.elem.checked;

    initselect();

    });

    });

    //全选按钮和其他按钮的颜色不一样

    function allCheckbox(){

    qx1=$('#qx').next('div').children('span');

    if($('#qx').prop('checked')){

    //被选中就设置颜色

    qx1.css({

    'background-color':'#e4393c'

    })

    }

    }

    //初始化设置全选按钮的颜色,

    allCheckbox();
    })

    css

    .layui-form-checkbox span {

    width:154px

    }

    .layui-unselect.layui-form-checkbox{

    margin-bottom:5px;

    }

    .layui-form-checkbox span{

    color:#4C5277;

    }

    .layui-form-checked span{

    color:#fff;

    }

    /*.layui-form-checked span{

    background-color:#b31717!important;

    }*/

    更多layui知识请关注layui使用教程栏目。

    展开全文
  • 判断复选框是否被选中的属性是checked,如果checked属性的值为true,则说明复选框已选中;如果checked属性的值为false,则说明复选框未被选中。可以先将每个复选框的name设置为同名,然后使用getElementByName()方法...
    判断复选框是否被选中的属性是checked,如果checked属性的值为true,则说明复选框已选中;如果checked属性的值为false,则说明复选框未被选中。可以先将每个复选框的name设置为同名,然后使用getElementByName()方法访问所有同名的复选框,最后使用循环语句来统一设置所有复选框的checked属性,从而实现全选/全不选效果。
    
    展开全文
  • JSP动态选择复选框(通过JSTL实现)
  • 有时候我们想要在选中文字的时候就自动勾选或取消复选框,有两种实现的方式:①在复选框的外边包上&lt;label/&gt;标签&lt;label&gt;&lt;input type="checkbox"&gt;233333333&...
  • VB DataGridView通过复选框实现多条记录的删除VB DataGridView通过复选框实现多条记录的删除VB DataGridView通过复选框实现多条记录的删除
  • --在后台实现一个批量删除操作, 前台需要全选所有的复选框--&gt; &lt;!--2. 技术分析:--&gt; &lt;!--1). 确认事件:鼠标单击事件onclick,绑定事件的位置;--&gt; &lt;!--2). 获取编号前面...
  • 本文通过实例给大家演示ionic js 复选框 与普通的 HTML 复选框到底有没区别的相关知识,非常不错具有参考借鉴价值,感兴趣的朋友一起学习吧
  • 最近在做项目时,遇到一个这样的需求,就是在多级菜单中,选中二级的复选框,默认将它下面的三级复选框全部选中,若选中一级的复选框,默认的将它下面的二级的和三级的复选框全部选中,通过JS,可以得到当前页面所有...
  • elementUI复选框监听change事件,关联isHotel方法,方法让isHotel值改变,然后又 v-model双向绑定isHotel值,这样会出现死锁,让复选框失去选择视觉效果,虽然change关联的方法可以实现。 而且这个复选框直接绑定...
  • 通过jquery实现复选框全选效果 实现的js和页面的HTML如下: <!-- jquery引入到这个jsp里面 --> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <!-- 我们的jquery...
  • 通过复选框启动Ajax

    2016-04-16 18:29:49
    <p>I am facing a great problem . I am working on a project..Online food booking..In this project I want to add menu and their price by selecting their corresponding checkbox..I want to fire ajax ...
  • 全选,通过复选框操作

    2008-11-25 11:56:10
    // 全选,通过复选框操作 //checkid列表复选框name function CheckAll() { for (var i=0;i
  • 通过复选框插入

    2010-11-23 13:51:34
    <p>I'm trying to insert via checkbox, but it saves only one record, suppose in the table I've got 10 records, it saves only the 10th one. I think there is a problem in the for each....
  • 通过复选框计算总价

    2011-07-12 10:26:38
    --用户每选中一个复选框,就表示用户选定与之关联的商品,脚本程序立即算出所有选定商品的总金额,并显示在总价格区域中。 如果用户取消先前选择的某件商品,脚本程序应立即从总金额中减去该商品的价格。--> ...
  • 通过复选框获取数据

    2013-09-20 16:38:12
    ... <p>here's what i've tried: <p>the part where it changes the sql command <pre><code>if (isset($_GET['checkDress'])){ ... $where=" where category = 'kleit'";...<p>checking one of the checkboxes is fine...
  • layui复选

    2020-11-02 17:25:17
    layui复选框的样式,都是在选然后才会有的,所以直接通过css设置就实现不了了。只可以通过js动态设置 html代码使用了jfinal的模板 <div class="layui-inline"> <label class="layui-form-label">&...
  • jsp通过勾选复选框实现批量删除

    万次阅读 2015-06-29 20:17:47
    这是自己开发的时候碰到的问题,当时想实现可以通过勾选复选框删除从数据库中读取并以表格显示的数据,废话不说,先上效果图。 这个效果是可以勾选复选框然后点击删除实现批量删除。 选择 <th width="180">I
  • 最近做到一个项目,需要checkbox翻页复选这个功能。网上查了下,没什么好的方法,这里将我的实现分享出来,看看大家有没有更好更有效的方法。 闲话不多说了,首先关于checkbox: Checkbox 对象 Checkbox 对象代表...
  • 默认的折叠面板单击就可打开,业务要求通过复选框控制折叠面板的打开 如图是默认的折叠面板展示: 下面这张图是修改为依靠复选框打开折叠面板的效果: 代码如下: <el-collapse v-model="activeNames" @change...
  • 按时区显示时间 作者:彭刚 时间:2019年9月25日08:45:09 <!doctype html> <html> <head>...复选框求指定城市时间</title> <style> #show{ font-size:36px; paddi...
  • 在`UIViewController`中有一个`UITextView`,要对UITextView插入多个复选框。 怎么创建多个复选框,并且对这些复选框动态的创建方法? 目前代码如下: -(void)Check { CGPoint origin = note.frame....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,126
精华内容 1,250
关键字:

复选通过