精华内容
下载资源
问答
  • 本文分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解和扩展。...

    本文分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解和扩展。

    代码如下:

    js点击文本框弹出可选择的checkbox复选框

    #div{

    margin-bottom:10px;

    position:relative;

    }

    #div1{

    width:153px;

    padding-top:0px;

    padding-left:0px;

    position:absolute;

    }

    #div1 ul{

    margin-top:0px;

    padding-left:0px;

    background-color:#ccc;

    list-style:none;

    }

    #div1 ul li{

    padding-left:0px;

    }

    #div1 ul li input{

    margin-left:15px;

    }

    .close{

    display:none;

    }

    .open{

    display:block;

    }

    $(function(){

    var position=$("#xx").offset();

    $("#div1").offset({

    top:position.top+22,

    left:position.left

    });

    $("#xx").click(function(){

    $("#NG").toggleClass("open");

    });

    $("#div1 input[name=ng]").click(function(){

    var arr=new Array();

    $("input[name=ng]:checked").each(function(key,value){

    arr[key]=$(value).val();

    });

    $("#xx").val(arr.join(","));

    })

    })

    • 1
    • 2
    • 3

    以上代码实现了我们的要求,下面介绍一下它的实现过程。

    代码注释:

    1.$(function(){}),当文档结构完全加载完毕再去执行函数中的代码。

    2.var position=$("#xx").offset(),获取文本框相对于document文档的偏移量,offset()函数返回的是一个对象,此对象包含两个属性left和top,分别表示相对于文档的水平和垂直偏移量。

    3.$("#div1").offset({top:position.top+22,left:position.left}),设置弹出下拉菜单容器的相对文档的偏移量,第一个加22是为了使其在文本框的下面显示。

    4.$("#xx").click(function(){$("#NG").toggleClass("open");}),为文本框注册click事件处理函数,点击它可以切换样式类open删除和添加,也就是设置下拉菜单的显示和隐藏。

    5.$("#div1 input[name=ng]").click(function(){ }),为name属性值为ng的文本框注册click事件处理函数。

    6.var arr=new Array(),创建一个数组,用来存放选中checkbox复选框的value值。

    7.$("input[name=ng]:checked").each(function(key,value){arr[key]=$(value).val();}),将选中的复选框的值存入数组。

    8.$("#xx").val(arr.join(","));,将数组元素连接成字符串写入文本框。

    希望本文所述对大家学习javascript程序设计有所帮助。

    展开全文
  • 本文实例为大家介绍了javascript如何动态添加checkbox复选框:在实际应用中可能需要动态的添加复选框,下面就简单介绍一下如何实现此效果。单纯的创建一个复选框是很容易的,代码如下:var oCheckbox=document....

    本文实例为大家介绍了javascript如何动态添加checkbox复选框:

    在实际应用中可能需要动态的添加复选框,下面就简单介绍一下如何实现此效果。

    单纯的创建一个复选框是很容易的,代码如下:

    var oCheckbox=document.createElement("input");

    oCheckbox.setAttribute("type","checkbox");

    oCheckbox.setAttribute("id","mayi");

    但是这仅仅是是创建了一个checkbox对象,但是往往不能够满足实际需要,因为在实际应用中,一般会在checkbox复选框前面或者后面有说明性的文字,下面就介绍一下如何实现此效果:

    方法就是创建一个checkbox对象,然后再创建一个文本节点,然后添加到div即可。

    添加checkbox复选框

    var oCheckbox=document.createElement("input");

    var myText=document.createTextNode("蚂蚁部落");

    oCheckbox.setAttribute("type","checkbox");

    oCheckbox.setAttribute("id","mayi");

    window.οnlοad=function(){

    var mydiv=document.getElementById("mydiv");

    mydiv.appendChild(oCheckbox);

    mydiv.appendChild(myText);

    }

    以上代码动态创建了一个checkbox对象,并且后面跟有文字,希望对大家的学习javascript有所帮助。

    展开全文
  • layui如何获取checkbox复选框的值

    千次阅读 2021-01-17 16:44:59
    layui如何获取checkbox复选框的值发布时间:2020-10-21 17:07:09来源:亿速云阅读:164作者:Leah本篇文章给大家分享的是有关layui如何获取checkbox复选框的值,小编觉得挺实用的,因此分享给大家学习,希望大家阅读...

    layui如何获取checkbox复选框的值

    发布时间:2020-10-21 17:07:09

    来源:亿速云

    阅读:164

    作者:Leah

    本篇文章给大家分享的是有关layui如何获取checkbox复选框的值,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

    获取layui表单复选框已选中的数据

    HTMLlayui.form.checkbox 获取选中复选框

    开关关

    开关开

    立即提交

    JSlayui.use('form', function(){  var form = layui.form,

    $ = layui.$;  //各种基于事件的操作。

    form.on('submit(*)', function(data){    //将页面全部复选框选中的值拼接到一个数组中

    var arr_box = [];

    $('input[type=checkbox]:checked').each(function() {

    arr_box.push($(this).val());

    });    //数组

    console.log(arr_box);

    return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。

    });

    });

    如果需要字符串的话,再将数组转为字符串console.log(arr_box.toString());

    如果需要自定义分割字符的字符串console.log(arr_box.join(","));

    以上就是layui如何获取checkbox复选框的值,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。

    展开全文
  • html代码:应用一组{% for peopel_1 in peopels_1 %}{{ peopel_1.name }}{% endfor %}应用二组{% for peopel_2 in peopels_2 %}{{ peopel_2.name }}{% endfor %}提交js代码:1 获取已选中的名字并放到数组中var name...

    html代码:

    应用一组

    {% for peopel_1 in peopels_1 %}

    {{ peopel_1.name }}

    {% endfor %}

    应用二组

    {% for peopel_2 in peopels_2 %}

    {{ peopel_2.name }}

    {% endfor %}

    提交

    js代码:

    1 获取已选中的名字并放到数组中

    var name_list = [];

    $("input[name='people_name']:checked").each(function(){

    name_list.push($(this).val)

    });

    2 利用ajax向后台传递form表单数据

    $(".select_people").submit(function(event){

    event.preventDefault();  // 阻止默认表单的action功能

    var name_list = [];

    $("input[name='people_name']:checked").each(function(){

    name_list.push($(this).val)

    });

    data = {'id': 1, 'names': name_list};

    $.ajax({

    url: "task_mgm/********",

    type: "POST",

    data: JSON.stringify(data),

    contentType: "application/json",  //发送到后台的数据格式

    data_type: "json",  // 接收后端返回的数据格式

    success: function(resp){

    if (resp.error == "OK"){ console.log('分享成功') }

    else { console.log('分享失败') }

    }

    });

    })

    python后台代码:

    071b9c07855ff108dbf93e9ebb883df3.png

    ef0b22e376e38997e907b437a93e4cfe.png

    1 @task_mgm.route('/taskinfo_share_people', methods=['POST', 'GET'])2 @login_required3 deftaskinfo_share_people_fun():4 datas =request.get_json()5 task_id = datas.get('id')6 sharePeopleList = datas.get('names')7 print(sharePeopleList)8 task =ShareTask()9 if len(sharePeopleList) >0:10 task.taskId =task_id11

    12 sharePeopleList = list(set(sharePeopleList)) #去重

    13 sharePs = ','.join(sharePeopleList)14 task.sharePeopleTo =sharePs15 task.sharePeopleFrom =current_user.name16 db.session.add(task)17 db.session.commit()18 return jsonify(error='OK', emsg="True")19 else:20 return jsonify(error='NO', emsg="False")

    View Code

    展开全文
  • CheckBox复选框

    千次阅读 2021-06-11 10:49:55
      XML文件如下: <LinearLayout xmlns:android=... android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <CheckBox android:id="@+id/first_
  • checkbox复选框组的使用 最近做的一个项目使用checkvox复选框组,用后台返回来的数据进行复选框的选中与否,并将修改的状态发给后端。 后台给的数据是数组里面包含对象的形式,[name: “”, status: false], 但是...
  • js checkbox复选框实现单选功能

    万次阅读 2021-01-21 21:02:13
    js checkbox复选框实现单选功能 <script type="text/javascript"> $(":checkbox").click(function(){ $(this).attr("checked",true);//设置当前选中checkbox的状态为checked $(this).siblings().attr...
  • 点击某标签(eg:客户意向楼盘),出现弹出框(eg:楼盘复选框列表),监测checkbox复选框(楼盘)已选中个数,并实时显示;可限制最多选中个数。效果图: 1、部分html代码:(类名称有些是框架里面的,可忽略;样式请自行...
  • activity_checkbox.xml布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" ...
  • layui获取checkbox复选框

    千次阅读 2021-01-17 16:45:05
    获取layui表单复选框已选中的数据HTMLlayui.form.checkbox 获取选中 复选框开关关开关开立即提交JSlayui.use('form', function(){var form = layui.form,$ = layui.$;//各种基于事件的操作。form.on('submit(*)', ...
  • van-checkbox 复选框功能

    2021-03-09 17:55:06
    van-checkbox 复选框功能 涉及的功能点: 动态设置弹出框的最大高度 VUE点击遮罩层内功能区以外的地方,遮罩层关闭 设置disabled,确定添加不可修改 去除默认滚动条 <template> <div class="hw_detail"&...
  • el-checkbox-group v-modle=checkboxGroup1 @change=handleCheckbox> <el-checkbox-button v-for=“item in msgList” :label=“item” :disabled=currentItemId? currentItemId !== item.id : false :key=...
  • 实现的代码如下:第一种方法:文字必须是label标签内,checkbox的id和<label>标签内的for=""中的名字必须相同。实现代码如下: <input type="checkbox" id="check1" value="123" name="name" class="check...
  • checkbox复选框样式 随着现代浏览器的流行,纯CSS设置checkbox也变的很是实用,下面会讲到5种与众不同的checkbox复选框. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要 ... 随机推荐 修改...
  • CheckBox控件表明一个特定的状态(即选项)是选定 (on,值为1) 还是清除 (off,值为0)。...CheckBox复选框JS实现全选、不选、全不选功能,很简单,具体内容如下思路:1、获取元素2、给全选 不选 反选...
  • 方法一:如何根据条件判断是否默认选中table表格前面的复选框table.render({elem: '#userTable', url: '../sysRole/getUserList', title: '用户列表', page: true //开启分页, cols: [[{type:'checkbox'}, {field: '...
  • uni-app中更改复选框的默认样式 在 app.vue 中添加以下代码, /* #ifdef H5 */ uni-checkbox .uni-checkbox-input { width: 100px; height: 50px; } uni-checkbox .uni-checkbox-input::before { content...
  • Element-ui框架checkbox复选框全选加回显功能 <template> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" >全选</el-checkbox> <...
  • 【Vue-Vant】Checkbox复选框--案例分析

    千次阅读 2021-01-22 17:12:32
    多选和全选是复选框中的基本组成部分,复选框用于在选中和非选中状态之间进行切换。在很日常场景中都是很常见的,这里是个小案例,记录平时复选框的运用
  • 在项目开发中我们经常会用到表单元素,而我们做出来的页面往往是要让用户看的,所以需要对表单默认的样式进行优化,这里以复选框CheckBox和单选框radio为例。自从有了css3这一切都变得那么简单,实现原理很简单,...
  • layui动态禁用checkbox复选框

    千次阅读 2021-01-26 15:08:18
    input class="cjeckList" type="checkbox" name="name" /> <button class="disabledBtn">禁用</button> <button class="setBtn">编辑</button> js: //禁用 $(".disabledBtn").click...
  • 有时候,我们需要一个透明背景的 checkbox 复选框(与背景衔接),如下图所示: 解决方案 注意 <style> 标签添加 lang=“scss”,否则无效。 采用覆盖样式方法,想自定义其他样式都在 .el-checkbox__inner ...
  • 这次给大家带来CSS设置Checkbox复选框的样式,CSS设置Checkbox复选框样式的注意事项有哪些,下面就是实战案例,一起来看一下。首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观。要做到点...
  • 下面是纯CSS设置Checkbox复选框控件的五种简单样式,有兴趣的可以进行改动将其变成自己想要的样式。 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观。要做到点需要添加一段代码到你的...
  • checkbox:'true' },{ align: "left", colspan: 1, field: "itemName", halign: "center", rowspan: 1, title: "项目名称", width: 300 }]] 表格初始化 var initDataGrid = function(){ $table...
  • 问题:谷歌浏览器下,checkbox复选框不现实出来 F12查看 实际界面显示 问题分析:可能是样式冲突或者其他,f12查看样式如下 将margin:0px;去掉,加入 -webkit-appearance: checkbox 具体如下 ...
  • -- 多选框不显示label 只要在里面加上<br>就OK了 --> <el-checkbox :label="item.name" :key="item.id"> <br> </el-checkbox> 自己考虑了挺久都不知道怎么做,没想到是这么简单,太秀...
  • <el-form-item> <el-col :span="4"> 审批人"></el-input> </el-col> </el-form-item> </el-form> element ui 复选框选中同时获得id和label值的实现 因为我的复选框是根据树数据渲染生成的 完整代码 <template> <div>...
  • 通过一个或者多个复选框来控制一组 CheckBox 的选中状态。2.根据一组 CheckBox 的选中状态来决定某些控件的状态。如:一组 CheckBox 中,至少有一项被选中,某个按钮才可以被点击,否则按钮处于灰色状态,不可点击。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 91,722
精华内容 36,688
关键字:

checkbox复选框