精华内容
下载资源
问答
  • 单个复选框
    千次阅读
    2018-08-21 16:57:17
    <script src="vue.js"></script>
    <!-- DOM模板 view 视图层 -->
    <div id="demo">
        <input type="checkbox" id="a" v-model="checked" />
        <label for="a">{{checked}}</label>
    </div>
    // Vue实例
    var vm = new Vue({
        el:'#demo',
        data:{
            checked:true
        }
    })    

    v-model="checked",表达式checked的值为true,表示勾选中;反之表达式checked的值为false,表示不选中;

    更多相关内容
  • <input type=”checkbox” id=”cr” />”cr”>我已经阅读</label> a 用DOM方式来判断是否被选中 代码如下: $(function(){ var $cr = $(“#cr”); var cr =$cr[0]; $cr.click(function(){ if(cr.checked){ ...
  • Query要用`prop()`函数来获取 / 设置某个复选框的勾选情况,不要用`attr()`;JS则用`checked`属性来获取 / 设置复选框的勾选情况。

    jQuery要用prop()函数来获取 / 设置某个复选框的勾选情况,不要用attr();JS则用checked属性来获取 / 设置复选框的勾选情况。

    .
    .
    .
    <!-- 复选框 -->
    <input type="checkbox" name="status"><label>启用XXX</label>
    <script>
    	// 用jquery操作
    	/* 1. 获取复选框勾选情况 */
    	var status = $('input[name="status"]').prop('checked');
    	alert(status);// 值为false
    	/* 2. 给复选框赋值 */ 
    	$('input[name="status"]').prop('checked', true);
    	alert($('input[name="status"]').prop('checked'));// 此时的勾选情况为true
    
    	// 用JS操作
    	/* 3. 获取复选框勾选情况 */ 
    	status = document.querySelector('input[name="status"]').checked;
    	alert(status);// 此时仍为true
    	/* 4. 给复选框赋值 */
    	document.querySelector('input[name="status"]').checked = false;
    	alert(document.querySelector('input[name="status"]').checked);// 此时勾选情况为false
    </script>
    
    展开全文
  • 上图 样式是默认的,其实自己可以改些CSS样式更好看些 代码全: <!DOCTYPE html> <html>...Vue 测试实例 - 单个,多个复选框</title> <script src="https://cdn.staticf...

    上图 

    样式是默认的,其实自己可以改些CSS样式更好看些 

    代码全:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 单个,多个复选框</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
      <p>单个复选框:</p>
      <input type="checkbox" id="checkbox" v-model="checked">
      <label for="checkbox">{{ checked }}</label>
    	
      <p>多个复选框:</p>
      <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
      <label for="runoob">Runoob</label>
      <input type="checkbox" id="google" value="Google" v-model="checkedNames">
      <label for="google">Google</label>
      <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
      <label for="taobao">taobao</label>
      <br>
      <span>选择的值为: {{ checkedNames }}</span>
    </div>
    
    <script>
    new Vue({
      el: '#app',
      data: {
    	checked : false,
        checkedNames: []
      }
    })
    </script>
    </body>
    </html>

    下面是点击复选框事件

    <template>
        <div id="secert-main">
             <label for="label" @change="clickMe">
                    <input type="checkbox" id="label" v-model="ckeckVal" >点我
            </label>
            <p :class="ckeckClass">复选框没有被选中</p>
        </div>
    </template>
    <script type="text/javascript">
    export default {
        data() {
                return {
                    ckeckVal:false,
                    ckeckClass:'',
                    ckeckInfo:'复选框没有被选中'
                }
            },
            methods:{
        clickMe(){
            var that=this;
            if(that.ckeckVal){
                that.ckeckInfo='复选框被选中了';
                that.ckeckClass='red';
            }else{
                that.ckeckInfo='复选框没有被选中';
                that.ckeckClass='';
            }
        }
      }
    }
    </script>
    <style type="text/css">
    .red{
            color: red;
        }
    </style>

    更多技巧请查看vue专栏   https://blog.csdn.net/qq_42221334/column/info/27230/1

    展开全文
  • 此文章为单个获取。 批量获取示例在...

    此文章为单个获取。

    批量获取示例在https://blog.csdn.net/wybshyy/article/details/106693049

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TemplateEdit.aspx.cs" Inherits="MyProject.YuanGongPingJia.TemplateEdit" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <link href="/JS/layui/css/layui.css" rel="stylesheet" />
        <script src="/JS/jquery-3.4.1.js"></script>
        <script src="/JS/layui/layui.js"></script>
    </head>
    <body>
        <form class="layui-form" action="">
    
    
            <div class="layui-form-item" style="margin-top: 20px;">
                <label class="layui-form-label">
                    模板名称
                </label>
                <div class="layui-input-block">
                    <input type="text" id="TemplateName" name="title" required lay-verify="required" placeholder="请输入模板名称" autocomplete="off" class="layui-input" style="width: 200px;" />
                </div>
            </div>
            <blockquote class="layui-elem-quote layui-text">
                题目总分请勾选共105分,已勾选<span id="allfen">0</span>分
            </blockquote>
            <div class="layui-form-item" pane="">
                <label class="layui-form-label">模板题目</label>
                <div class="layui-input-block">
                    <%=sbSubjects.ToString() %>
                    <input type="checkbox" id="2" name="Subjects" value="10" lay-filter="subjects" lay-skin="primary" title="(10分)-是否爱公司" /></br>
                    <input type="checkbox" id="3" name="Subjects" value="11" lay-filter="subjects" lay-skin="primary" title="(10分)-是否爱公司" /></br>
                </div>
            </div>
            <%--<div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary" onclick="toSubmit()">重置</button>
                </div>
            </div>--%>
            <input id="key" type="hidden" value="<%=templatesModel!=null?templatesModel.Id:0 %>" />
            <input id="hdsubs" type="hidden" value="<%=templatesModel!=null?templatesModel.TempSubjects:"," %>" />
        </form>
    
        <script>
            //Demo
            layui.use('form', function () {
                var form = layui.form;
                //注意:lay-filter="subjects"
                form.on('checkbox(subjects)', function (data) {
                    //console.log(data.elem); //得到checkbox原始DOM对象
                    //console.log(data.elem.checked); //是否被选中,true或者false
                    //console.log(data.value); //复选框value值,也可以通过data.elem.value得到
                    //console.log(data.othis); //得到美化后的DOM对象
                    var cb = data.elem;
                    var subid = $(cb).attr("id");//题目的ID
                    var goufen = $(cb).attr("value");//题目分值
                    var allfen = $("#allfen").text();//提示的已勾选的题目的总分
                    var hdsubs = $("#hdsubs").val();//隐藏域中存放的题目集合以逗号隔开
                    if (data.elem.checked) {//如果当前复选框改为选中状态
                        allfen = parseInt(allfen) + parseInt(goufen);
                        if (hdsubs.indexOf(","+subid + ",")<0) {
                            $("#hdsubs").val(hdsubs + subid + ",");
                        }
                    }
                    else {
                        allfen = parseInt(allfen) - parseInt(goufen);
                        if (hdsubs.indexOf(","+subid + ",") >= 0) {
                            hdsubs = hdsubs.replace(","+subid + ",",",");
                            $("#hdsubs").val(hdsubs);
                        }
                    }
                    
                    $("#allfen").text(allfen);
                    if (allfen>105) {
                        layer.msg('总分已达到105分,请评估是否继续。', { icon: 7 });
                    }
                }); 
            });
    
        </script>
    
    </body>
    </html>
    

     

     

    展开全文
  • Vue 由单个复选框引发的联想

    千次阅读 2017-07-31 22:37:51
    关于复选框,我想只要会点html的,大多数会用,但今天在Vue的实例中遇到一个小小的问题引发了我的思考。在此我先把Vue的实例代码贴出来,再来探讨一下:<!DOCTYPE html> <title>Title ...
  • elementui的table复选框单选
  • 在很多网站都有这样的功能,当点击一个全选按钮之后,所有的复选框都会被选中...JS实现复选框的全选和取消全选 - 何问起</title><base target="_blank" /> <style type="text/css"> li { list-st
  • 内容索引:VB源码,界面编程,listview,复选框 VB给listview控件添加自动选择功能,也就是说当我们用鼠标点击列表的某一行而非点击复选框的时候,复选框会自动打勾选中,再次单击鼠标则取消选中,在某些软件系统中,...
  • 1.单个复选框,绑定的是布尔值 <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> 2.多个复选框,绑定的是数组 <div id='example-3...
  • 本文实例为大家分享了react实现复选框全选和反选组件的具体代码,供大家参考,具体内容如下
  • uniapp简单的复选框

    千次阅读 2020-10-13 10:13:27
    只有一个的复选框 <view style="display: flex;justify-content: center;align-items: center;margin-top: 60upx;"> <checkbox-group @change="selectCk"> <label style="display: flex;flex-...
  • 复选框的勾选

    2021-06-08 09:50:57
    效果如图 第一个按钮为全部勾选 第二个按钮为取消全部勾选 第三个按钮为反勾选 下为结构图 ...获取全部复选框和三个按钮 ...用for循环为全部复选框checked等于true ...然后全部复选框勾选上 ...执行复选框checked等于fal
  • 第二部分--下面复选框需要全部选中,上面全选复选框才能选中: 利用for循环将每个复选框添加点击事件,接着使用一个小技巧(设置一个flag变量控制全选按钮是否选中。并为其赋值为true默认选中,因为checked的属性...
  • jquery操作复选框(checkbox)的12个小技巧。 1、获取单个checkbox选中项(三种写法) $("input:checkbox:checked").val() 或者 $("input:[type='checkbox']:checked").val(); 或者 $("input:[name='ck']:...
  • 1、获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$("input:[type='checkbox']:checked").val();或者$("input:[name='ck']:checked").val();2、 获取多个checkbox选中项$('input:checkbox'...
  • uni-app——实现复选框功能

    千次阅读 2021-08-07 23:18:17
    当时没看uniapp开发文档,就按照自己知道的复选框写法写的 <input type="checkbox" /> 虽然设置了其type属性值为checkbox,但是在页面中显示的依然只是一个input的输入框,而不是复选框,后来专门去查看了...
  • 复选框的全选全不选,以及单个点击
  • 使用jQuery实现全选框选中时选中所有复选框, 取消选中全选框时,所有的复选框取消选中状态 取消其中一个就会取消全选框, 全部选中则选中全选所在的复选框 代码实现: <html> <head> <meta ...
  • 简单的点胜过复杂的高明
  • uniapp 复选框 是否选中取值

    千次阅读 2021-01-15 11:55:51
    uniapp js 根据复选框 取值 对列表的数据加标记 选中为true 非true为没有选中 每勾选一次 循环计算一次 总数就是选中数 选中存 <序号、是否选中>对象 数组去掉选中 循环数组 找到对应的 进行移除 <view ...
  • 用于 jQuery 和 Zepto 的高度可定制的复选框和单选按钮。 jQuery 和 Zepto JavaScript 库支持单个文件。 iCheck 像构造函数一样使用复选框和单选按钮。 它用一个 div 包装每个输入,该 div 可以由您自定义或使用可用...
  • //layui单/复选框设置值和获取值 layui.use('form',function(){ var sex='男'; var form=layui.form; from.on('submit(submit)',function(data){ //设置值 //radio $('[name=checkedbox]').each(function (i...
  • HTML: 全选 JS: window.onload = function (){ var all = document.getElementById ("all"); //全选checkbox var box = document.... //子复选框 //遍历checkbox,把子
  • ``` input type = "checkbox" id = "xxx" >停用 $("#xxx").val();//不管有没有选中,值都为空 如何使,选中后.val()值为“on” ```
  • js获取复选框的值

    2019-10-12 14:50:04
    <div class="demo"> <input type="checkbox" name="write" class="check" title="写作"> <input type="checkbox" name="read" class="check" title="阅读"> <input type="check...
  • HTML中 单复选框的用法

    万次阅读 2018-12-06 19:40:07
    今天看了看单复选框的用法,感觉很是好玩儿 ,所以赶快来把学会的分享下! 首先,在使用表单设计调查问卷时,为了减少用户的操作,使用选择框是一个不错的选择。 HTML中有两种选择框,分别为单选框和复选框。 两者的...
  • 【uniapp-checkbox】修改uniapp-checkbox复选框的样式
  • java:按钮(复选框

    千次阅读 2022-04-04 18:46:38
    按钮(复选框)一、关键代码(一)、单选按钮组件(二)、按钮默认勾选二、简单说明三、流程图四、源码(一)、源码A(二)、源码A的运行效果五、结语六、定位日期 一、关键代码 (一)、单选按钮组件 复选框“◻”...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,192
精华内容 11,276
关键字:

单个复选框