精华内容
下载资源
问答
  • 单选框 radio<div class="radio-inline"> <input type="radio" name="killOrder" value="1"/> <label for="killOrder1"&...

    单选框 radio总结:

    一、页面样式截图:

    <div class="radio-inline">
      <input type="radio"  name="killOrder" id="killOrder1" value="1"/>
      <label for="killOrder1">是</label>
    </div>
    <div class="radio-inline">
      <input type="radio"  name="killOrder" id="killOrder2" value="0" checked/>
      <label for="killOrder2">否</label>
    </div>

    使用label标签可以点击文字就能选中单选框或者是取消选择单选框 

    label标签的两种使用方法:   https://blog.csdn.net/qq_40015157/article/details/110850331

     

    二、js原生

    1、js原生获取选中的值

    var tesObj = document.getElementsByName("killOrder");
    //获取选中的值
    for(var i=0; i < tesObj.length; i++){
     	if (tesObj[i].checked==true){
             alert(tesObj[i].value+'  是选中的value值');
             break;
        }
    }
    

    2、js原生设置选中

    var tesObj = document.getElementsByName("killOrder");
    
    //设置value值为0选中
    for(var i=0; i < tesObj.length; i++){
     	if (tesObj[i].value=="0"){
               tesObj[i].checked = true;
               break;
        }
    }

    三、jquery

    1.获取值

    $("input[name='killOrder']:checked").val();
    
    $('input:radio:checked').val();
    
    $("input[type='radio']:checked").val();
    
    $(":radio[checked]").each(function(radio){alert($(this).val());

     

    注意:有时attr() 无法起到作用,attr() 与 prop() 的区别详见文章。   https://blog.csdn.net/qq_40015157/article/details/110823718

     

    2.设置第一个radio为选中值:

    $('input:radio:first').prop('checked', 'checked');
    
    $('input:radio:first').prop('checked', true);
    
    
    $('input:radio:first').attr('checked', 'checked');
    
    $('input:radio:first').attr('checked', true);

     

    3.设置最后一个radio为选中值:

    $('input:radio:last').prop('checked', 'checked');
    
    $('input:radio:last').prop('checked', true);
    
    
    $('input:radio:last').attr('checked', 'checked');
    
    $('input:radio:last').attr('checked', true);

     

    4.根据索引值设置任意一个radio为选中值:

    $('input:radio').eq(索引值).prop('checked', true);//索引值=0,1,2....
    
    $('input:radio').slice(1,2).prop('checked', true);
    
    
    $('input:radio').eq(索引值).attr('checked', true);//索引值=0,1,2....
    
    $('input:radio').slice(1,2).attr('checked', true);

     

    5.根据value值设置radio为选中值

    $("input:radio[value='2']").prop('checked', true);
    
    $("input[value='1']").prop('checked', true);
    
    $("input[name='killOrder'][value='1']").prop("checked", "checked");
    
    let v = 1;//变量
    $("input[name='killOrder'][value='" + v + "']").prop("checked", true);
    
    
    $("input:radio[value='2']").attr('checked', true);
    
    $("input[value='1']").attr('checked', true);

     

    6.删除value值为2的radio

    $("input:radio[value='2']").remove();

     

    7.删除第几个radio

    $("input:radio").eq(索引值).remove();//索引值=0,1,2....
    
    
    //如删除第3个radio:$("input:radio").eq(2).remove();

     

    8.遍历radio

    $('input:radio').each(function(index,domEle){
    
         //写入代码
    
    });

     

    9.修改单选框样式

    input[type="radio"] + label::before {
        content: "\a0";
        display: inline-block;
        vertical-align: middle;
        width: 15px;
        height: 15px;
        margin-right: 5px;
        border-radius: 50%;
        text-indent: .15em;
        margin-bottom: 4px;
        border: 1px solid #CCCCCC;
    }
    input[type="radio"]:checked + label::before {
        background-color: #4A90E2;
        background-clip: content-box;
        padding: 2px;
    }
    input[type="radio"] {
        position: absolute;
        clip: rect(0, 0, 0, 0);
    }
    .radio-inline{
        padding-left: 0;
    }
    input[type=radio][disabled]:checked + label::before{
        background-color:#CCCCCC;
        background-clip: content-box;
        padding: 2px;
    
    }

    复选框总结 :   https://blog.csdn.net/qq_40015157/article/details/110819778 

    全选反选 :https://blog.csdn.net/qq_40015157/article/details/110661715

    https://blog.csdn.net/qq_40015157/article/details/80693777

    输入框: https://blog.csdn.net/qq_40015157/article/details/80692543

     

    展开全文
  • 魔改ChatTable资料之单选框系列
  • listview单选

    2016-11-30 10:54:09
    listview单选
  • Android 简单的单选以及单选互斥 和多选模式 代码量少 功能齐全
  • Dreamweaver单选按钮怎么出一道单选题?想要制作一个单选题的网页,该怎么给网页添加单选题呢?我们需要使用dw单选按钮来实现,下面我们就来卡看详细的教程,需要的朋友可以参考下
  • 单选按钮ios单选

    热门讨论 2012-10-28 20:16:52
    ios单选
  • ListView单选

    2017-02-21 22:56:17
    支持ListView单选试下
  • 本文给大家介绍的是java中选择框、单选框和单选按钮的操作方法,十分的简单实用,有需要的小伙伴可以参考下。
  • Listview单选

    2013-12-18 14:28:55
    本Demo通过两种途径实现了Listview的单选效果(自定义adapter) \n 1.点击Listview的item实现单选效果,就是点击item实现单选 \n 2.点击item上的单选框实现单选效果,就是点击单选框时,实现单选效果
  • button 单选

    2015-11-05 13:06:35
    简单的实现 UIButton 按钮 单选 代码易懂
  • 今天小编就为大家分享一篇layui radio单选限制下一个radio单选的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • UITableView单选

    2015-08-25 09:02:12
    简单的单选功能,希望对菜鸟们有帮助哦,也希望大神们多多指教!!
  • 单选按钮互斥

    2017-09-12 18:43:42
    代码类资源请使用单选按钮互斥,二选一,代码类资源请使用单选按钮互斥,二选一代码类资源请使用单选按钮互斥,二选一代码类资源请使用单选按钮互斥,二选一代码类资源请使用单选按钮互斥,二选一代码类资源请使用...
  • ajax单选

    2017-04-26 09:42:22
    ajax单选
  • 单选积件单选积件单选积件单选积件单选积件单选积件单选积件单选积件单选积件单选积件单选积件单选积件
  • vue实现单选按钮 页面单选

    千次阅读 2019-09-26 17:14:10
    vue实现单选按钮

    vue实现单选按钮

    展开全文
  • ListView实现单选

    2016-03-10 12:24:56
    ListView实现单选
  • 单选和多选

    2018-11-13 11:42:42
    这里面主要包括HashMap实现单选(HansMap的遍历)和HashSet实现多选
  • Flutter Radio 单选按钮

    2019-10-21 10:06:59
    Flutter Radio 单选按钮
  • Java单选.docx

    2019-12-08 14:41:00
    常见Java单选题,
  • Android ListView单选

    2018-01-23 09:41:44
    Android ListView单选模式 单选....................................................
  • 单选多选类库

    2016-08-03 14:17:01
    使用OC封装的一套单选按钮和多选按钮类库,使用单选类库可以只导入单选类库,也可以都两者都导入,按钮选项可以有任意多个,选中选项会标红。
  • 1、首先将原先的单选框隐藏掉。 2、利用label:before 在label的前面加一个元素来模拟单选框的样式。 3、利用:checked css选择器将选中的单选框单独设置样式。 4、具体样式自根据项目手动设置比较灵活。 代码如下:...

    1、首先将原先的单选框隐藏掉。
    2、利用label:before 在label的前面加一个元素来模拟单选框的样式。
    3、利用:checked css选择器将选中的单选框单独设置样式。
    4、具体样式自根据项目手动设置比较灵活。
    代码如下:

    <!--html-->
     <ul class="pay_type">
              <li v-for="(item,i) in circleData.charges_type" :key="i">
                <input
                  :id="item.id"
                  class="radio"
                  type="radio"
                  name="radios"
                  :value="JSON.stringify(item)"
                  v-model="checkedValue"
                />
                <label
                  :for="item.id"
                >{{item.type}}</label>
                
              </li>
            </ul>
    
    //css
     > input {
          display: none;
        }
        > label {
          display: flex;
          align-items: center;
        }
        > input[type="radio"] + label:before {
          content: "";
          display: inline-block;
          width: 13px;
          height: 13px;
          padding: 3px;
          border: 1.5px solid #d7d7d7;
          border-radius: 50%;
          background: #f5f5f5;
          margin-right: 10px;
        }
        > input[type="radio"]:checked + label:before {
          content: "";
          border: 1.5px solid #ff4443;
          background: #ff4443 content-box;
        }
    
    展开全文
  • ios 单选与多选

    2017-06-07 17:29:37
    多选单选
  • java单选列表

    2016-04-07 08:09:11
    基于java的单选列表
  • iOS 单选按钮

    2016-06-26 22:20:20
    高度自定义的 iOS 单选按钮
  • 运行程序,发现前面2个单选框可以单选,后面2个单选框也可以单选,但前面2个选中一个和后面2个选中一个却可以同时存在,不会单选了,如下图: 原因:单选框控件Tab键顺序不连续,如下图进行查看顺序,可以看出4个...

    问题描述:
    最开始设计时,放了2个单选框,将其中一个单选框的属性中Group改为True,过了一段时间,添加了其它控件,但由于需要,后来又多放了2个单选框;运行程序,发现前面2个单选框可以单选,后面2个单选框也可以单选,但前面2个选中一个和后面2个选中一个却可以同时存在,不会单选了,如下图:

    存在不单选的问题
    原因:单选框控件Tab键顺序不连续,如下图进行查看顺序,可以看出4个单选框两两连续,4个不连续:
    在这里插入图片描述
    在这里插入图片描述
    解决办法:鼠标左键依次一个一个单击每一个单选框,比如从左到右或者从右到左,使单选框tab键顺序连续。
    在这里插入图片描述

    展开全文
  • 易语言菜单单选例程源码,菜单单选例程,子程序1
  • 易语言单选框使用源码,单选框使用
  • 用于处理 android 中的单选按钮的自定义单选组如果您使用原生 android RadioGroup 类来处理带有波斯语文本的单选按钮,则在排列它们时会遇到一些问题。 通过使用 PersianRadioGroup,您可以将单选按钮分开布局(不在...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 228,598
精华内容 91,439
关键字:

单选