精华内容
下载资源
问答
  • CSS3自定义美化复选框Checkbox按钮样式代码 CSS3自定义美化复选框Checkbox按钮样式代码 CSS3自定义美化复选框Checkbox按钮样式代码
  • Bootstrap Switch将复选框和单选按钮变成切换开关
  • 复选框变成单选框

    千次阅读 2014-12-23 14:21:46
    复选框实现单选

    在一些场景下需要将复选框改为单选框,并且允许不做任何一个复选框

    <%@ page language="java" contentType="text/html; charset=utf-8"
        pageEncoding="utf-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>案例标签</title>
    <script type="text/javascript">
    	function check(i, obj) {    //此处的两个参数 i class的值 obj 是当前复选框
    		var c = obj.checked;  //记录下当前复选框的状态
    		$("." + i).removeAttr("checked");  //删除所有的选中
    		if(c == true){  //判断状态
    			$(obj).attr("checked", 'true'); //为true 选中复选框
    		}else{
    			$(obj).removeAttr("checked"); //false 删除选中
    			
    		}
    	}
    </script>
    </head>
    <body>
    <div>
     <ul class="ul_top">
         <!-- 类型  此处全都都是动态加载的 -->
                <c:forEach items="${list}" var="c" varStatus="i">
                    <li class="in_checkbox">
                        <span>${c.name}&nbsp;:</span>
                           <!-- 值 -->
                        <c:forEach items="${v}" var="v">
                            <c:if test="${c.id==v.idD }">
                                <input type="checkbox" id="name" name="name" οnclick="check('c${i.index}',this)"  class="c${i.index}" value="${vid}" <c:if test="${v.isFalg() == true}">checked</c:if>/>${v.name}
                            </c:if>
                        </c:forEach>
                    </li>
              </c:forEach>              	
      </ul>
    </div>
    </body>


    展开全文
  • 2.2 复选框和单选按钮的使用实例

    千次阅读 2017-06-22 22:26:29
    复选框和单选按钮都用于在界面上显示一些选项供用户选择,界面上的复选框可以随意选择或取消选择,而处于同一组的单选按钮,同时只能有一个处于选中状态,当一个单选按钮变成选择状态时,其同组中之前选中的控件将...

    复选框和单选按钮都用于在界面上显示一些选项供用户选择,界面上的复选框可以随意选择或取消选择,而处于同一组的单选按钮,同时只能有一个处于选中状态,当一个单选按钮变成选择状态时,其同组中之前选中的控件将自动清除选择状态;

    2.2.1 技术要点:

    • 和按钮控件一样,复选框和单选按钮在单击时都会发出 BN_ CLICKED 消息;
    • 实际上,复选框和单选框按钮本身就是按钮控件,只是比普通按钮控件多了“BS_ CHECKBOX ”、“BS_ RADIOBUTTON ”等风格,使得其功能和外观不同于普通按钮;
    • 在 MFC 中,对这两种控件的封装都是 CButton 类;

    2.2.2 实例步骤:

    本实例通过一个三基色测试程序,演示复选框控件和单选控件的使用方法。实例步骤如下:

    1. 新建一个基于对话框的 MFC 应用程序,项目名称为“CheckBoxDemo”;这里写图片描述
    2. 在主对话框上添加3个复选框控件,将其ID分别修改为“IDC_ CHK_ RED”、“IDC_ CHK_ GREEN”和“IDC_ CHK_ BLUE”。文本属性分别修改为“红”、“绿”和“蓝”;这里写图片描述
    3. 在主对话框上添加两个单选按钮控件,将其 ID 分别修改为“ IDC_ RD_ RECT”和“ IDC_ RD_ ROUND”,文本属性分别修改为“矩形”和“圆形”。添加控件后,选中“IDC_ RD_ RECT”的“Group”属性。注意在添加控件时要连续按照顺序添加,以保证其 ID 的连续性;这里写图片描述
    4. 在对话框中单击鼠标右键,并单击弹出菜单中的“ClassWizard”项,打开类向导。在类向导中选择“Member Variables”选项卡,在“Control IDs”列表框中选中“IDC_ CHK_ BLUE”。单击“Add Variable”按钮,将弹出添加变量对话框,在“Member variable name”文本框中输入变量名称“m_ chk_ blue”,并将“Category”下拉框的选项修改为“Control”,单击“OK”按钮为控件添加控件型变量;这里写图片描述这里写图片描述
    5. 重复上诉步骤,为对话框上的所有复选框的单选框按钮添加控件型变量,添加变量后的类向导界面如图;这里写图片描述
    6. 再通过类向导为主对话框添加“WM_ ERASEBKGND”消息的响应函数。注意要先将类向导中“Class Info”标签页中的“Message filter”修改为“Window”,才能在“Message Maps”标签页中看到该消息;这里写图片描述这里写图片描述

    函数代码如下所示:

    //WM_ERASEBKGND消息的响应函数
    BOOL CCheckBoxDemoDlg::OnEraseBkgnd(CDC* pDC) 
    {
        //先绘制默认背景
        BOOL bRet = CDialog::OnEraseBkgnd(pDC);
        //获取复选框控件所选的颜色
        int nRed, nGreen, nBlue;
        nRed = m_chk_red.GetCheck() ? 255 : 0;
        nGreen = m_chk_green.GetCheck() ? 255 : 0;
        nBlue = m_chk_blue.GetCheck() ? 255 : 0;
        //根据选择组成颜色
        COLORREF crFore = RGB(nRed, nGreen, nBlue);
        //创建指定颜色的画刷
        CBrush brush;
        brush.CreateSolidBrush(crFore);
        //将画刷选入DC
        CBrush *pOldBrush = pDC->SelectObject(&brush);
        //根据选择,绘制矩形或圆形
        RECT rc = {50, 20, 150, 120};
        if(m_rd_rect.GetCheck())
            pDC->Rectangle(&rc);
        else
            pDC->Ellipse(&rc);
        //恢复DC原状
        pDC->SelectObject(pOldBrush);
        return bRet;
    }

    通过类向导,为主对话框上的所有复选框和单选按钮添加单击事件的响应函数,函数代码如下:

    //界面上的单选按钮和复选框的单击事件响应函数
    void CCheckBoxDemoDlg::OnChkBlue() 
    {
        //选项改变时,让对话框重绘
        Invalidate();
    }
    //其余控件均采用相同的处理代码
    void CCheckBoxDemoDlg::OnChkGreen() 
    {
        OnChkBlue();
    }
    void CCheckBoxDemoDlg::OnChkRed() 
    {
        OnChkBlue();
    }
    void CCheckBoxDemoDlg::OnRdRect() 
    {
        OnChkBlue();
    }
    void CCheckBoxDemoDlg::OnRdRound() 
    {
        OnChkBlue();
    }

    在主对话框的 OnInitDialog 事件中添加如下所示的初始化代码:

    BOOL CCheckBoxDemoDlg::OnInitDialog()
    {
        CDialog::OnInitDialog();
    
        // Set the icon for this dialog.  The framework does this automatically
        //  when the application's main window is not a dialog
        SetIcon(m_hIcon, TRUE);         // Set big icon
        SetIcon(m_hIcon, FALSE);        // Set small icon
    
        // TODO: Add extra initialization here
        //默认选择“圆形”单选按钮
        CheckRadioButton(IDC_RD_RECT, IDC_RD_ROUND, IDC_RD_ROUND);  
    
        return TRUE;  // return TRUE  unless you set the focus to a control
    }

    2.2.3 程序运行:

    按 F5 键运行程序,修改界面上的选项,程序就会自动在界面上绘制出指定颜色的图形:这里写图片描述

    2.2.4 源程序解读:

    • 通过本节实例,读者可以掌握给对话框上的控件添加变量的方法。变量有两种类型,一种是控件变量,通过该变量可以访问和控制控件的所有属性。另一种是数值型变量,通过该变量可以方便地访问控件的值,但无法访问更多属性;
    • 一组单选按钮控件在对话框上必须具有连续的ID,并且这组控件中的第一个选中了“Group”属性,这样这组控件就具有了互斥特性,以保证同时只有一个能被选中;
    展开全文
  • CSS3复选框开关生成器 :confetti_ball: 一秒钟将输入复选框变成切换,而无需任何其他元素! :confetti_ball:
  • CSS3与HTML5实现的个性Checkbox复选框和单选按钮Radio特效,多种风格,将复选框和单选按钮变成不同的形状,演示了选中状态和不选中时候的样子,特别适合用于移动应用。
  • 使用jquery实现BootstrapSwitch将复选框和单选按钮变成切换开关方法html代码jquery代码 html代码 <div class="form-group"> <label class="control-label col-md-2 col-sm-2 col-xs-12">是否需要物料&...

    使用jquery实现BootstrapSwitch将复选框和单选按钮变成切换开关方法

    html代码

    <div class="form-group">
                                    <label class="control-label col-md-2 col-sm-2 col-xs-12">是否需要物料</label>
                                    
    展开全文
  • html> charset="utf-8"> src="js/jquery.min.js"> input[type=checkbox] {visibility: hidden; } .checkboxFive label { cursor: pointer; position: absolute
    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title> </title>
        <script src="js/jquery.min.js"></script>
    
        <style>
         input[type=checkbox] {visibility: hidden;  }
        .checkboxFive label {
              cursor: pointer;
              position: absolute;
              width: 25px;
              height: 25px;
              top: 0;
              left: 0;
              background: white;
              border:1px solid #ddd;
              border-radius: 50%;
        }
         .checkboxFive label:after {
             opacity: 0.2;
             content: '';
             position: absolute;
             width: 9px;
             height: 5px;
             background: transparent;
             top: 6px;
             left: 7px;
             border: 3px solid white;
             border-top: none;
             border-right: none;
             display: none;
    
             -webkit-transform: rotate(-45deg);
             -moz-transform: rotate(-45deg);
             -o-transform: rotate(-45deg);
             -ms-transform: rotate(-45deg);
             transform: rotate(-45deg);
         }
    
         .checkboxFive input[type=checkbox]:checked + label:after {
             display: block;
             opacity: 1;
         }
    
         .checkboxFive input[type=checkbox]:checked + label{
             background-color: #3fd1a5;
         }
    
    
    
        </style>
    </head>
    <body>
        <div class="checkboxFive">
            <input type="checkbox" value="1" id="checkboxFiveInput" name="" />
            <label for="checkboxFiveInput"></label>
        </div>
    </body>
    </html>
    展开全文
  •  你可以在上面的选项中勾选你喜欢吃的快餐店,在勾选的过程中,你可以发现它是可以复选的。但在图形选项中,我们并无法 清楚用户是否选择此项目,因为选或不选图形都一样。为解决这个问题,我们要使用到事件处理...
  • 首先看图: 其次代码: multiselect: true,//将jqGridTable中默认的复选框改成单选效果 multiboxonly:true,//将jqGridTable中默认的复选框改成单选效果 ... * 将jqGridTable中默认的复选框...
  • 代码片段: [removed][removed] [removed][removed] [removed][removed] [removed][removed]
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...D.
  • 今天系统中有处地方需要一个功能点击一个按钮后将树节点前的复选框去掉,变成没有选择的状态。网上搜索了半天,然后自己查查API,终于找到解决办法了,下面把方法贴出来。 在Extjs3.x和4.x版本中的处理方法是不一样...
  • checkbox .wx-checkbox-input{ border-radius: 50%;/* 圆角 */ width: 46rpx; /* 背景的宽 */ height: 46rpx; /* 背景的高 */ } /* 选中后的 背景样式*/ checkbox .wx-checkbox-input.wx-checkbox-input-checked{...
  • //将复选按钮的功能实现成单选按钮的功能 //传进来的ID是数据的ID,name是数据的名称 function message(id,name) { //message1取出checkbox的ID名为message1的 var boxArray = document.getElementsByName('...
  • CSS自定义复选框按钮样式-绿色复选框 原创 2016-03-04 吴统威 编程的人 HTML自带的复选框或者单选框按钮样式都是比较简单的一种. 而有时候这些表单控制, 可能需要配合自己的主题样式. 需要去美化他们. ...
  • jquery树形复选框插件 今天,我们为您提供15个以上的jQuery单选按钮复选框样式插件的列表 -一组使用jQuery的简单,轻便,可样式化的单选按钮复选框插件。 请享用! :) 更新29/09/13:添加了17. jQuery Uniform...
  • 具体如下: 希望能帮到你!
  • HTML5自定义网页的checkbox radiobox单选按钮复选框,把单选按钮变成一个点击变色的花朵,把复选框的对勾变成自定义的形状,比默认效果漂亮多了,这里的定义使用了自定义图片。
  • 复选框和单选按钮变成拨动开关。 由创建,由和在社区的帮助下维护。 与Bootstrap 4,Bootstrap 3和Bootstrap 2兼容。 播放。 快速开始 提供几个快速入门选项: 下载 克隆仓库: git clone ...
  • 关于checked按钮自定义样式—使用label 一般有两种方法 1.设置背景图片 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text...
  • 复选框变单选框

    2012-03-22 15:25:27
    因为开发需要,根据客户的无理要求把复选框变单选框。
  • 修改复选框样式

    2018-02-06 11:38:40
    使用渐进增强的方式美化复选框样式 复选框 Checkbox 是 Web 应用常用控件,随处可见,原生的复选框控件一般就像下面这样: 选中状态 未选状态 这取决于操作系统和浏览器,有些时候,这种样子并不能满足设计...
  • 文章目录Radiobutton 选项按钮选项按钮的基本概念Checkbutton 复选框 Radiobutton 选项按钮 选项按钮的基本概念   选项按钮Radiobutton 名称的由来是无线电的按钮,在收音机时代可以用无线电的按钮选择特定频道。...
  • QCheckBox 复选框

    千次阅读 2017-08-30 20:40:11
    程序流程图: 首先要在Qt Designer 中创建需要的布局,textBrowser用来显示协议文本,checkBox创建复选框,pushButton创建按钮“下一步”和“取消”; 更改复选框按钮的名称,作为ui调用的函数;
  • 下面是纯CSS设置Checkbox复选框控件的五种简单样式,有兴趣的可以进行改动将其变成自己想要的样式。 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观。要做到点需要添加一段代码到你的CSS...
  • 单选框和复选框的区别是什么?单选框和复选框的区别是什么? 详细一点~。(1)复选框可以允许你选择多个设置,而...关于单选按钮复选框的叙述中,正确的是() A.单...关于单选按钮复选框的叙述中,正确的是() A.单...
  • 主要为大家详细介绍了微信小程序实现复选框效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 由于vant 中的单选、复选在手机端无 带边框选框的效果 只能自己动手写一个了 为方便查看是否所需,先上效果图 单选 复选 单选代码 <div class="RadioStyle"> <div class="radioList"> <...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,234
精华内容 6,493
关键字:

复选框变成按钮