精华内容
下载资源
问答
  • js使用li或者div来模拟input的复选框单选框样式,7行代码,兼容好

    之前做项目的时候,也遇到过需要按照设计稿把<input type="checkbox"><input type="radio">的默认样式进行修改,但发现,并没有可以重置效果的方法,之前用过-webkit-appearance的方法,但是这个只在webkit内核的浏览器里面生效,火狐不生效。
    所以自己写了个js,用li来模拟复选框和单选框的效果,很简单,7行就行。

    效果图:
    这里写图片描述

    涉及到的知识点:自定义属性来存储点击状态和原来的class名

    html内容:

    <div id="box">
        <p>你最喜欢的运动</p>
        <ul>
            <li>爬山</li>
            <li>骑车</li>
            <li>游泳</li>
            <li class='hong'>篮球</li>
            <li class='hong'>足球</li>
            <li>羽毛球</li>
            <li>跳绳</li>
            <li>跑步</li>
        </ul>
    </div>

    js内容:
    注释比较多,是为了说明清楚,可能有点乱,能看懂的可以把注释删掉

    var aLi = document.querySelectorAll('#box ul li');  /*获取所有的li,如果要用class获取,可写成document.querySelectorAll('.class')*/
    for (var i=0;i<aLi.length;i++ )
    {
        aLi[i].ifCheck = false;                        /*自定义属性用来表示有没有被选中,初始化设置成false,未选中*/
        aLi[i].nowClass = aLi[i].className;            /*自定义属性用来存储最初的className,例如html内容里的class名,hong,这样在后面添加on的class名之后,不会导致原来的class名直接被覆盖*/
        aLi[i].onclick = function(){
             if(this.ifCheck){                         /*当点击当前li时,如果ifCheck是已经被选中状态*/
                this.className = this.nowClass         /*则让当前点击的li的class名等于最初的名字,也就是说把选中的on的class名去掉*/
        }else{
                this.className += ' on'                /*如果是未选中状态,则加上on,表示被选中*/
                }                                      /*可写成三目样式 this.className = this.ifCheck?this.nowClass:this.className+' on';*/
            this.ifCheck = !this.ifCheck;              /*一开始未选中,点击之后变成选中,不然相反,所以要给ifCheck的属性取反*/
        };
    };

    css样式:

    #box{
        width:600px;
        margin:50px auto;
    }
    #box p{
        font-size:14px;
        font-weight:bold;
        border-bottom:1px dashed #000;
        line-height:30px;
    }
    #box ul{
        margin-top:10px;
        overflow:hidden;
    }
    #box ul li{
        width:67px;
        height:20px;
        float:left;
        background-image:url(images/ck.png);  /*未选中时候的背景图*/
        background-repeat:no-repeat;
        font-size:12px;
        line-height:20px;
        text-indent:30px;
        margin-right:8px;
        cursor:pointer;
    }
    #box ul li.on{
        background-image:url(images/cked.jpg);   /*选中时候的背景图*/
    }
    #box ul li.hong{
        color:red;
    }

    本博客原创文章,若要转载,请注明出处
    有问题或者有错误的地方,可以留言,咱们讨论一下

    展开全文
  • 简单css美化复选框单选框样式方式

    千次阅读 2019-05-21 16:55:21
    原生的复选框单选框无法满足工作中的需求,更多是通过ui图决定复选框单选框样子,通过添加修改背景图片实现更加灵活,可修改性更强. 原始复选框单选框效果图: 背景图主要用到两张图片(选中前选中后):     &...

    纯css美化复选框单选框(通过添加修改背景图片实现)

    原生的复选框单选框无法满足工作中的需求,更多是通过ui图决定复选框单选框样子,通过添加修改背景图片实现更加灵活,可修改性更强.
    原始复选框单选框效果图:
    原始复选框单选框效果图
    背景图主要用到两张图片(选中前选中后):
    checked           checkbox

    通过伪元素绝对定位,相对与复选框单选框,给他们加上背景图片将原有的复选框单选框覆盖即可,代码如下

    input{
    	  position: relative;
    }
    //选中前
    input::before {
    	content: "";
    	//伪元素大小
      	width: 24px;
      	height: 27px;
      	//相对与复选框单选框位置
      	position: absolute;
      	top: -10px;
      	left: 0;
      	//背景图片设置
      	background-image: url("../img/nocheck.png");//未选中的时候的样子
      	background-size: 20px 20px;
      	background-position: 0px 7px;
      	background-repeat: no-repeat;
      	background-color: #3cab9f;
    }
    //选中后
    input:checked::before {
      	content: "";
      	background-image: url("../img/check.png");//选中的时候的样子
      	background-size: 24px 27px;
      	background-position: center;
    }
    
    大功告成,结果图如下

    111

    展开全文
  • dtree树形菜单带搜索复选框单选框插件 用于选择部门或者选择部门下人员 效果如下图 dtree树形菜单带搜索不带单选框复选框 dtree选择部门或者选择部门下人员复选框单选框插件 带搜索 ......

     

    dtree树形菜单带搜索复选框单选框插件 

    用于选择部门或者选择部门下人员

    效果如下图

    dtree树形菜单带搜索不带单选框复选框

     

    dtree选择部门或者选择部门下人员复选框单选框插件 带搜索

    https://download.csdn.net/download/qq_27559331/9885259

     

    展开全文
  • MFC控件编程之复选框单选框分组框 一丶分组框  分组框英文叫做 GroubBox添加了分组框主要就是分组.好看.不重点介绍 二丶单选框  英文: Raido Button  单选框需要注意的事项  1.单选框必须设置分组.在属性...

                        MFC控件编程之复选框单选框分组框

    一丶分组框

      分组框 英文叫做 GroubBox 添加了分组框主要就是分组.好看.不重点介绍

    二丶单选框

      英文: Raido Button  

      单选框需要注意的事项

      1.单选框必须设置分组. 在属性中设置. 设置为True

      2.如果有两个单选框那么TAB 顺序必须紧邻

    VS中设置单选框TAB顺序

    1,首先设置分组状态

    因为设置分组.所以需要指定TAB 按键顺序.也就是必须连着. 设置一个即可.

    2.设置TAB顺序

     

    快捷键Ctrl + d

    只需要点击控件则会自动设置顺序.

     

    3.程序窗口启动. 单选框默认选中第一个.

    在我们的对话框初始化函数中 (OninitDlg ) 使用API 进行设置.

    函数原型: 

     CheckRadioButton(控件ID, 控件ID, 要设置的控件ID);
     CheckRadioButton(IDC_RADIO1, IDC_RADIO2, IDC_RADIO2);
    前两个参数是给定一个范围. 最后一个参数.指明了我要设置哪一个用来选中.
    是在前面两个范围中的.

    应用程序截图:

      

    4.绑定变量.判断是否选中

    很多时候我们选中单选框就要判断是否选中来进行操作.其中也封装了函数.

    因为单选框是继承CButton 派生出来的子类.所以可以使用父类的函数.

    父类中有一个函数叫做  GetCheck 用来判断是否选中

    其余更多方法.查询MSDN 或者被人发的 MFC中文帮助文档.也可以. 输入CButton 即可看到所有方法. 当然也可以自己在程序中 F12进入定义查看API. 一般都有注释.

    三丶复选框

     

    复选框可以进行多选.  英文组件意思是 : Check Box

    复选框绑定控件变量.判断选中的方法也是 GetCheck 因为他也是继承CButton控件的. 所以也可以使用父类的.

    具体更多的方法.查询MSDN即可. 一般这种控件常用的就是是否选中. 

     

    转载于:https://www.cnblogs.com/iBinary/p/9653086.html

    展开全文
  • appium自动化中,如何操作复选框单选框,滑动选项等,如下图 package com.appium.zhihu; import org.openqa.selenium.By; import com.appium.util.AppiumUtils; import io.appium.java_client.MobileBy; ...
  • 49.java编程思想——创建窗口和程序片 文本 复选框 单选框 下拉列表 “文本字段”是允许用户输入和编辑文字的一种线性区域。文本字段从文本组件那里继承了让我们选择文字、让我们像得到字符串一样得到选择的文字,...
  • 入门HTML之复选框 单选框 下拉列表

    千次阅读 2013-12-18 20:53:32
    复选框(Checkbox)  在一个表单里的所有多选框可以有一个或多个被选中。 复选框 请选择您喜欢的音乐: 摇滚 爵士 流行 单选框(RadioButton) 一个表单里的所有变量名相同的单选框只能够有一个被...
  • 一、前言目前中文网站上面的文字,就我的个人感觉而言,绝大多数网站的...例如下面这张雅虎中国首页在火狐浏览器下的截图:雅虎中国首页单选框复选框与文字不对齐这里,不是说,雅虎中国的团队不够认真,而因为这1...
  • 5是一个文本框,获得5的句柄 ReadINIStr $5 "$PLUGINSDIR\page1.ini" "Field 5" "HWND" 设置文本框内容为1 SendMessage $5 ${WM_SETTEXT} 0 "STR:1"...HW
  • 复选框单选复选框单选复选框单选复选框单选复选框单选复选框单选复选框单选复选框单选复选框单选复选框单选复选框单选
  • MFC-复选框单选按钮用法

    千次阅读 2016-03-25 14:09:40
    复选框:判断是否被选中:方法1: 利用CButton类获取指向复选框按钮的指针,然后来操作它//获取指向复选框按钮的指针 CButton* pBtn = (CButton*)GetDlgItem(IDC_CHECK); //被选中返回1 if (pBtn->GetCheck()) { ...
  • 复选框单选多选全选功能实现

    千次阅读 2019-05-21 20:32:45
    复选框全选单选多选 新手干了一天实现的功能,很简陋勿喷,应该有更好的实现但不会 先看下代码吧 def userUpdate(request): if request.method == 'POST': data = {'msg': 404} user_id = request.session.get('...
  • eazy ui 复选框单选 重点 (Top highlight)Pick me! Pick me! No, pick me! In today’s cheat sheet we will be looking at selectors and how they differ. Unlike most of my other cheat sheets, this will focus...
  • 复选框单选框的判断

    千次阅读 2019-02-21 14:46:45
    虽然这样方便个人根据意愿去选择,但是如果碰到太多的复选框,一个一个的去选中,就会显得太麻烦,不利于操作,所以下面我们来讲解一下复选框的高级操作,即全选、全反选和全不选的判断,然后再简单讲解一下单选框的...
  • TreeView复选框单选

    千次阅读 2008-01-24 16:10:00
    本篇如何实现动态生成...如何实现TreeView复选框单选其中涉及:TreeNodeCheckChanged,SelectedNodeChanged,javascript__doPostBack("","");, CheckedNodes文章地址:http://blog.csdn.net/jjjjj102310253/archiv
  • 如何实现复选框单选其中涉及:TreeNodeCheckChanged,SelectedNodeChanged,javascript__doPostBack("","");, CheckedNodes隐藏页.cs(后台)代码:(用的时候记得改动webconfig,还有建表)using System;using ...
  • 单选框复选框的区别

    千次阅读 2017-04-13 19:45:07
    单选框 复选框 单选框是单选按钮,只允许单选一个 复选框是多选按钮,可以选多个 数据库获取表单的信息:单选框用request.getParameter();  复选框用request.getNameValues();
  • 复选框变成单选框

    千次阅读 2014-12-23 14:21:46
    复选框实现单选
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
  • vue 复选框 ,单选框

    千次阅读 2018-07-12 10:48:58
    复选框v-model 绑定一个数组,当选中当前项时,改项的value会自动进入数组中,未选中时会自动从数组中删除&lt;div id='example-3'&gt; &lt;input type="checkbox" id="jack" value...
  • 由于表单中文本框的使用频率大于复选框单选框,导致设计人员经常忽视后两类控件。复选框单选框看着用处不大,但使用不当会造成极大的影响,因此需要使用鼠标悬停效果使它们易于使用。
  •  //设置性别为单选  $("input[name='SEX']:checkbox").click(function () {  var flag = $(this).is(':checked');  if (flag) {  $(this).siblings("input").attr("checked", false);  }  }); 转载于:...
  • 复选框单选框的理解

    千次阅读 2019-07-06 19:49:07
    html中有两种选择框,即单选框复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选。 当type="radio"时,控件为单选框 当type="checkbox"时,控件为复选框 了解下...
  • layui checkbox 复选框 单选 取消选择

    千次阅读 2020-03-08 11:46:37
    <div class="layui-form"> 在岗" > 不在岗" > div> // 复选框单选框 form.on('checkbox', function (data) { var oldState = data.elem.checked // 记录状态 var elName = data.elem.name || '' // 取当前名称 $(...
  • //单选行 var input = $(this).find("input"); if ($(input).prop("checked")) { $(input).removeProp("checked"); } else { $(".table tr").find("input").each(function () { $(this).removeProp("checked...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 76,063
精华内容 30,425
关键字:

复选框单选框