精华内容
下载资源
问答
  • Bootstrap复选框和单选按钮美化插件

    千次阅读 2017-03-23 10:28:53
    找到一款Bootstrap复选框和单选按钮美化插件。时间紧张,简单记录。详情待整理。 http://www.htmleaf.com/css3/ui-design/201508262476.html 下载插件。目录如下 打开示例页面index.html. 选择你打算使用的

    今天写单选框的时候,根据要求需要美化样式,原来的样式太丑了。为了不重复写轮子,想到寻找插件解决。找到一款Bootstrap复选框和单选按钮美化插件。时间紧张,简单记录。详情待整理。


    http://www.htmleaf.com/css3/ui-design/201508262476.html


    下载插件。目录如下


    打开示例页面index.html. 选择你打算使用的样式。


    根据http://www.htmleaf.com/css3/ui-design/201508262476.html使用说明,使用插件。


    个人总结:


    1、根据index.html引用的外部文件,个人将css,Font-Awesome,fonts三个文件夹全部引入。

    2、个人选用的是单选按钮,样式如图


    html代码如下

    将以下代码拷贝到项目中,因为使用了foreach遍历中发现无法正常使用。

    <div class="checkbox checkbox">
                           <input type="radio" name="radio4" id="radio7" value="option1" checked>
                           <label for="radio7">
                               Defeault
                           </label>
                       </div>


    分析 之后感觉应该是单选按钮组 id=“radio7”的问题,将radio7修改成遍历值,保持label for与id相同。解决问题,使用代码如下



    参考文章:

    http://blog.csdn.net/fjnjxr/article/details/65437835


    https://github.com/flatlogic/awesome-bootstrap-checkbox


    Bootstrap复选框和单选按钮美化插件

    展开全文
  • 先给大家看效果图 下面是代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>...style type="text/css">.../*复选框*/ .gcs-checkbox { ...

    先给大家看效果图

    在这里插入图片描述
    下面是代码

    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <meta charset="UTF-8">
    
    <title></title>
    
    </head>
    
    <style type="text/css">
    
    /*复选框*/
    
    .gcs-checkbox {
    
      display: none;
    
    }
    
    .gcs-checkbox+label {
    
      background-color: white;
    
      border-radius: 0px;
    
      border: 1px solid #d3d3d3;
    
      width: 20px;
    
      height: 20px;
    
      display: inline-block;
    
      text-align: center;
    
      vertical-align: bottom;
    
      line-height: 20px;
    
    }
    
    .gcs-checkbox+label:hover {
    
      cursor: pointer;
    
      border: 1px solid #2783FB;
    
    }
    
    .gcs-checkbox:checked+label {
    
      background-color: #eee;
    
      background: #2783FB;
    
    }
    
    .gcs-checkbox:checked+label:after {
    
      content: "\2714";
    
      color: white;
    
    }
    
    /*单选按钮*/
    
    .gcs-radio {
    
     display: none;
    
    }
    
    .gcs-radio+label {
    
      width: 20px;
    
      height: 20px;
    
      line-height: 20px;
    
      display: inline-block;
    
      text-align: center;
    
      vertical-align: bottom;
    
      border: 1px solid gray;
    
      border-radius: 50%;
    
    }
    
    .gcs-radio+label:hover {
    
      border: 1px solid #2783FB;
    
      cursor: pointer;
    
    }
    
    .gcs-radio:checked+label {
    
      background: #2783FB;
    
      border: 1px solid #2783FB;
    
    }
    
    .gcs-radio:checked+label:after {
    
      content: "\2022";
    
      font-size: 35px;
    
      color: white;
    
    }
    
    </style>
    
    <body>
    
    <h2>复选框</h2>
    
    <div>
    
       语文<input type="checkbox" id="语文" class="gcs-checkbox">
    
            <label for="语文"></label> 
    
       数学<input type="checkbox" id="数学" class="gcs-checkbox">
    
             <label for="数学"></label>
    
       英语<input type="checkbox" id="英语" class="gcs-checkbox">
    
       <label for="英语"></label> 
    
      计算机<input type="checkbox" id="计算机" class="gcs-checkbox">
    
              <label for="计算机"></label>
    
    </div> <br />
    
    <hr />
    
    <h2>单选按钮</h2>
    
    <div>
    
      男<input type="radio" name="sex" class="gcs-radio" id="男" />
    
         <label for="男"></label> 
    
     女<input type="radio" name="sex" class="gcs-radio" id="女" />
    
         <label for="女"></label>
    
    </div>
    
    <hr />
    
    </body>
    
    </html>
    
    
    

    原地址:https://jingyan.baidu.com/article/90bc8fc8a25258f653640ccf.html

    展开全文
  • bootstrap 复选框单选按钮

    千次阅读 2019-07-03 15:49:32
    <div class="form-group floating-label"> <label >是否开启RMB购买</label> </div> <div > <label class="checkbox-inline">...input type="radio" name...
    <div class="form-group floating-label">
             <label >是否开启RMB购买</label>
    </div>
    <div >
         <label class="checkbox-inline">
              <input type="radio" name="is_buy"  value="1" <php>if($goodsCard['is_buy']==1){echo "checked";}</php> > 开启
          </label>
         <label class="checkbox-inline">
               <input type="radio" name="is_buy"  value="0" <php>if($goodsCard['is_buy']==0){echo "checked";}</php>> 关闭
          </label>
    
    </div>
    
    
    <div class="form-group floating-label">
          <label >可购买人群</label>
    </div>
    
    <div>
          <foreach name="vip" item="vo" >
               <label class="checkbox-inline">
                    <input type="checkbox" <php>if(in_array($key,$goodsVip)){echo 'checked';}</php> style='transform: scale(1.6,1.6)' name='vip[]' value="{$key}"> {$vo}
               </label>
         </foreach>
    </div>

     

    展开全文
  • 平时会遇到本来是单选的项,用radio是可以进行单选,但需要取消选中项时,除非自己代码进行控制不然无法取消选中,在这种前提下...//复选框单选 $("td[isOnly='only']").find(":checkbox").each(function(){ $(this).

        平时会遇到本来是单选的项,用radio是可以进行单选,但需要取消选中项时,除非自己代码进行控制不然无法取消选中,在这种前提下个人更倾向使用checkbox来实现单选。故特地分享下checkbox实现单选的js代码。
    1.加入如下js代码:
    <script type="text/javascript">
    //复选框单选
    $("td[isOnly='only']").find(":checkbox").each(function(){
    $(this).click(function(){
      if($(this).attr("checked")){
       $(this).parent().find(":checkbox").removeAttr('checked');
       $(this).attr('checked','checked');
      }
    });
    });
    </script>

     

    <td isOnly="only">

         <input type="checkbox" id="box1"><label for='box1'>测试1</label>

    <input type="checkbox" id="box2"><label for='box2'>测试2</label>

    </td>

    展开全文
  • 一开始在网上找了很多文章 ,例如 复选框单选框与文字对齐问题的研究与解决 但我把5个方法都试写了后 在火狐浏览器上 效果不佳 之后 又试了这条贴纸 复选框、单选框与文字对齐问题 效果可以 $("#i"...
  • 当UI拿给你的设计稿中的复选框单选按钮的外观与默认的外观出入很大,更漂亮,色彩更艳丽,是否会嘴角一抽,一筹莫展。不怕!在这里,你将找到完美的解决方法。
  • 复选框 checkbox 、单选按钮 radio 提交表单时的校验,原生js。方便自己复制粘贴。有需要的拿走。 上代码: <form id="form01" action="1.html" method="post"> <input type="checkbox" name="hoppy" ...
  • iCheck自定义复选框 & 单选按钮插件

    千次阅读 2016-03-09 13:59:31
    在不同浏览器设备上都有相同的表现 — 包括 桌面移动设备支持触摸设备 — iOS、Android、BlackBerry、Windows Phone支持键盘导航 — Tab、Spacebar、Arrow up/down 其它快捷键方便定制 — 用HTML ...
  • 一:文本框多行文本框 ...input type="text"/>...textarea>标签。文本框是用来输入单行文本的,而多行文本框可以输入多行文本。 二:下拉列表框列表框 ...三:复选框和单选按钮 单选按钮必须为每一个
  • 单选选择 <select v-model="sex" class="form-control"> <option value="">未选择</option> <option value="male">男</option> <option value="female">女</option>...
  • 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...
  • 下面是实现复选框反选的实例;如果是单选框,只需要将if(this.type=="checkbox")改为if(this.type=="radio")即可 $(".list tr").slice(1).each(function(){ var p = this; $(this).children().slice(1)....
  • 复选框和单选框的理解

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

    2017-08-08 02:55:09
    单选按钮<!DOCTYPE html> 单选按钮 性别: <input name="gen" type="radio" class="input" valu
  • rowSelection实现复选框单选功能

    千次阅读 2019-09-11 14:18:31
    rowSelection实现复选框单选功能rowSelection实现复选框单选功能第一步:去掉首行的复选框按钮第二步:设置复选框单选功能 rowSelection实现复选框单选功能 由于工作上的要求,现在需要使用复选框的样式,...
  • 如果复选框单选按钮没有设置Function Code,则它们就会像普通的输入框一样,即使状态发生了改变,也不会触发PAI事件 对话屏幕中的按钮、复选框单选按钮、下拉框的Function Code都是通过屏幕元素 attributes来...
  • 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...
  • checkbox(复选框)radio(单选按钮)的区别与详解

    万次阅读 多人点赞 2019-03-13 20:01:42
    选中一个复选框后,再次点击它,即可取消选中 选中一个单选按钮后,再次点击它,不能取消选中 &amp;amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;...
  • 由于表单中文本框的使用频率大于复选框和单选框,导致设计人员经常忽视后两类控件。复选框和单选框看着用处不大,但使用不当会造成极大的影响,因此需要使用鼠标悬停效果使它们易于使用。
  • 单选按钮 1.效果图 2.代码 <style> /*去除代码默认样式*/ input{ display: none; } /*在label前面添加自定义单选按钮*/ label:before{ content: ""; width: 5px; height: 5px; display: ...
  • input type='checkbox' value='眼部' name='s_selftesting_buwei[]'&gt;眼部 &lt;input type='checkbox' value='耳部' name='s_selftesting_buwei[]'&gt;耳部 if($("input[name='s_selftesting_...
  • Check Radio Buttons and Checkboxes by Default使用checked属性,你可以设置复选按钮和单选按钮默认被选中。为此,只需在input元素中添加属性checked&lt;input type="radio" name="test-name&...
  • 在mui中有时会调节复选框和圆的大小,发现单独的调节某处的样式,并没有效果。用js也是。在这想到重写他的样式,把原来的给覆盖掉, <style type="text/css"> .mui-checkbox input[type=checkbox]:before, ...
  • 效果如图片所示: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>...style type="text/css">.../*复选框*/ .gcs-checkbox { displ...
  • jquery中如实现判断复选框是否选中,获取选中单选按钮的值
  • js使用li或者div来模拟input的复选框和单选框样式,7行代码,兼容好
  • HTML自带的复选框或者单选按钮样式都是比较简单的一种. 而有时候这些表单控制, 可能需要配合自己的主题样式. 需要去美化他们. 以前可能需要借助JS的实现. 现在CSS也可以完全实现我们想要的效果. 我们直奔...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 38,448
精华内容 15,379
关键字:

复选框和单选按钮的type