精华内容
下载资源
问答
  • 单选框 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

     

    展开全文
  • 单选框

    2019-04-27 20:58:02
    单选框数据绑定 <script> window.onload = function() { var vm = new Vue({ el:'.box', data:{ content:'男' } }) } </script> ...

    单选框数据绑定

    <script>
        window.onload = function() {
            var vm = new Vue({
                el:'.box',
                data:{
                    content:'男'
                }
            })
        }
    </script>
    <body>
        <div class="box">
            <!-- v-model绑定content -->
            <input type="radio" name="sex" value="male" v-model='content'>男
            <input type="radio" name="sex" value="female" v-model='content'>女
            <!-- 胡子标签 -->
            <p>{{content}}</p>
        </div>
    </body>
    
    展开全文
  • 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;
        }
    
    展开全文
  • mui单选框单选框在一行

    万次阅读 2017-06-19 15:02:52
    单选框(radio) 横着的单选框 性别 男 女 单选框换个样式 性别 男 女 图标左对齐 radio radio disabled radio 图标右对齐 radio radio disabled radio 列表模式的单选框 Item 1Item 2Item 3

     

     

    <!DOCTYPE html>
    <html>

        <head>
            <meta charset="utf-8">
            <title>Hello MUI</title>
            <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
            <meta name="apple-mobile-web-app-capable" content="yes">
            <meta name="apple-mobile-web-app-status-bar-style" content="black">

            <!--标准mui.css-->
            <link rel="stylesheet" href="../css/mui.min.css">
            <!--App自定义的css-->
            <link rel="stylesheet" type="text/css" href="../css/app.css"/>
            <style>
            
            /*这里的样式是为第一个行的单选框写的,其他的换行的不用*/
              .radio_inline{
                    display: inline-block;
                    width: 65%;
                }
                .radio_inline label{

                    width: 20%;
                    padding-left: 40px;
                    padding-right: 40px;
                }
                .radio_inline input[type=radio]{
                    width: 15%;             
                    right: auto;
                }
                
                
                /*//换个样式*/
               .change .mui-radio input[type='radio']:checked:before{
                content:'\e442';
                color:red;
                }
            </style>
        </head>

        <body>

            <header class="mui-bar mui-bar-nav">
                <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
                <h1 class="mui-title">单选框(radio)</h1>
            </header>
            
        
            
            
            <div class="mui-content">
                
                
                
                <h5 class="mui-content-padded">横着的单选框</h5>
                <div class="mui-input-row ">
                            <label>性别</label>
                            <span class="radio_inline mui-radio">
                                <input name="radio1" type="radio" id="radio_man" checked value="1">
                                <label for="radio_man">男</label>
                                <input name="radio1" type="radio" id="radio_woman" value="0">     
                                <label for="radio_woman">女</label>        
                            </span>               
               </div>
                
                
                <h5 class="mui-content-padded">单选框换个样式</h5>
                <div class="mui-input-row change">
                            <label>性别</label>
                            <span class="radio_inline mui-radio">
                                <input name="radio1" type="radio" id="radio_man" checked value="1">
                                <label for="radio_man">男</label>
                                <input name="radio1" type="radio" id="radio_woman" value="0">     
                                <label for="radio_woman">女</label>        
                            </span>               
               </div>
                
                
                
                
                <h5 class="mui-content-padded">图标左对齐</h5>
                <div class="mui-card">
                    <form class="mui-input-group">
                        <div class="mui-input-row mui-radio mui-left">
                            <label>radio</label>
                            <input name="radio1" type="radio">
                        </div>
                        <div class="mui-input-row mui-radio mui-left">
                            <label>radio</label>
                            <input name="radio1" type="radio" checked>
                        </div>
                        <div class="mui-input-row mui-radio mui-left mui-disabled">
                            <label>disabled radio</label>
                            <input name="radio1" type="radio" disabled="disabled">
                        </div>
                    </form>
                </div>
            
                <h5 class="mui-content-padded">图标右对齐</h5>
                <div class="mui-card">
                    <form class="mui-input-group">
                        <div class="mui-input-row mui-radio">
                            <label>radio</label>
                            <input name="radio1" type="radio">
                        </div>
                        <div class="mui-input-row mui-radio">
                            <label>radio</label>
                            <input name="radio1" type="radio" checked>
                        </div>
                        <div class="mui-input-row mui-radio mui-disabled">
                            <label>disabled radio</label>
                            <input name="radio1" type="radio" disabled="disabled">
                        </div>
                    </form>
                </div>
                
                
                
                
                
                
                <h5 class="mui-content-padded">列表模式的单选框</h5>
                <ul class="mui-table-view mui-table-view-radio">
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right">
                            Item 1
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-selected">
                        <a class="mui-navigate-right">
                            Item 2
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right">
                            Item 3
                        </a>
                    </li>
                </ul>
                <div class="mui-content-padded">
                    <p id="info"></p>
                </div>
            </div>
        </body>
        <script src="../js/mui.min.js"></script>
        <script>
            mui.init({
                swipeBack:true //启用右滑关闭功能
            });
            var info = document.getElementById("info");
            document.querySelector('.mui-table-view.mui-table-view-radio').addEventListener('selected',function(e){
                info.innerHTML = "当前选中的为:"+e.detail.el.innerText;
            });
            
        </script>
    </html>

     

    展开全文
  • 1 flutter单选框Radio的基本使用///单选框的基本使用///默认选中的单选框的值int groupValue = 0;Radio buildRadioUseWidget() { return Radio( ///此单选框绑定的值 必选参数 value: 0, ///当前组中这选定的值 必选...
  • uniapp单选框和获取单选框的值

    千次阅读 2020-02-24 21:36:32
    其实uniapp的单选框的标签不是像html中的标签`<input type="radio" />...uniapp中有单独的单选框标签`<radio value="女" /><text>女</text>`, 效果图: 这样实现uniapp单选框了 ...
  • 单选框_复选和单选框

    2021-01-11 20:02:59
    大家好,今天我们来学习掌握复选框和单选框的交互效果。复选框针对的是多选题,每一个选项的选中状态都是各自独立互不影响,即是否勾选第一个选项,对勾选第二个选项的结果没有任何影响;单选框针对的是单选题,在...
  • 1 flutter单选框Radio的基本使用///单选框的基本使用///默认选中的单选框的值int groupValue = 0;Radio buildRadioUseWidget() { return Radio( ///此单选框绑定的值 必选参数 value: 0, ///当前组中这选定的值 必选...
  • 易语言单选框选择框选中状态.rar 易语言单选框选择框选中状态.rar 易语言单选框选择框选中状态.rar 易语言单选框选择框选中状态.rar 易语言单选框选择框选中状态.rar 易语言单选框选择框选中状态.rar
  • 本文给大家介绍的是java中选择框、单选框和单选按钮的操作方法,十分的简单实用,有需要的小伙伴可以参考下。
  • 项目需求是:需要提交多个老师的信息,信息中包含老师的职位,职位是单选框;难点是:怎么确保多个单选框不冲突,单选框怎么用v-for遍历出来;最终效果是:1、首先最外层先通过数组遍历出来,数组结构需要加上老师...
  • 易语言单选框选择框选中状态源码,单选框选择框选中状态,SendMessageA,CheckRadioButton,GetDlgCtrlID,CheckDlgButton
  • 怎么用excel实现对题目的单选框和复选框的制作了?看了之后原来这么简单。如下图:一:单选框的制作:首先在excel中输入好题目及答案。第一步:点击”开发工具“-"设计模式"-”插入“-单选框按钮:第二步:点击”...
  • 业务中时常需要我们根据不同场景做出不同样式的单选框&多选框,下面简单写两个。单选框方块单选框html //html <div class="group"> <label class="active"> <input type="radio" checked=...
  • 易语言源码单选框选择框选中状态.rar 易语言源码单选框选择框选中状态.rar 易语言源码单选框选择框选中状态.rar 易语言源码单选框选择框选中状态.rar 易语言源码单选框选择框选中状态.rar 易语言源码单选框选择...
  • 单选按钮ios单选框

    热门讨论 2012-10-28 20:16:52
    ios单选框
  • jQuery单选框复选框美化代码是一款精装单选跟复选组件下载。 jQuery单选框复选框美化代码截图
  • iphone单选框复选框样式是一款jquery click事件制作iphone风格的单选框样式复选框样式。
  • XP单选框1.1.rar

    2020-04-05 19:35:05
    XP单选框1.1.rar XP单选框1.1.rar XP单选框1.1.rar XP单选框1.1.rar XP单选框1.1.rar XP单选框1.1.rar
  • 2.12 单选框和复选框(radiobox、checkbox)本篇主要介绍单选框和复选框的操作一、认识单选框和复选框1.先认清楚单选框和复选框长什么样2.各位小伙伴看清楚哦,上面的单选框是圆的;下图复选框是方的,这个是业界的...
  • 易语言单选框使用.rar

    2020-02-23 19:57:18
    易语言单选框使用.rar 易语言单选框使用.rar 易语言单选框使用.rar 易语言单选框使用.rar 易语言单选框使用.rar 易语言单选框使用.rar
  • layui单选框未显示的问题

    万次阅读 2020-02-10 18:06:23
    一开始还没导入idea的时候,单纯点击一个网页是有显示出来的,当我把这个带有单选框的网页放到idea的项目中去的时候,发现单选框没显示出来。 1.首先在确认js.css等东西有导入,和之前的网页也没有什么区别 2.网上...
  • 好看的单选框样式

    2018-03-02 18:09:29
    好看的单选框样式,好看的单选框样式,好看的单选框样式,好看的单选框样式,好看的单选框样式
  • 单选框和复选框 单选按钮和复选按钮都是普通按钮Button的子类,所以可以使用所有Button的方法和属性。也有自己特有的属性方法 单选框 单选框就是在多个选项中只选择一个。 在Android中,单选按钮用RadioButton表示,...
  • 一般我们使用单选框,会这么写://HTMLonetwothree有”checked”属性的单选框会默认选中。但在vue里这是无效的,因为它会跟具体的参数值绑定。(后来看到vue的官网教程,确实写了这么一段:v-model 会忽略所有表单...
  • java的swing单选框用法示例本文实例讲述了java之swing单选框用法。具体如下:import java.awt.*;import javax.swing.*;import java.awt.event.*;public class test extends JAppletimplements ActionListener{ ...
  • 一:目前只找到着两种方法可以回显单选框的数据: 1:根据value值确定单选 $("input[type=radio][name='remindFlg'][value='0']").attr("checked",'checked'); 回显单选框例子: 前端页面代码 <tr> &...
  • jQuery单选框和复选框美化标签选择代码 jQuery单选框和复选框美化标签选择代码 jQuery单选框和复选框美化标签选择代码 jQuery单选框和复选框美化标签选择代码 jQuery单选框和复选框美化标签选择代码
  • Peanut butter cupsSnickersTurtles从代码可以看出,该表单使用post方式提交,并且表单中有三个radio单选框,而且这三个radio单选框的name属性必须设置为相同的值Candy,否则他们将不是同一组单选框了。下面看...
  • 单选框和复选框在日常工作中应用非常广泛,使用Excel制作的方法也比较简单。单选框和复选框的制作工具在工作表菜单栏的“开发工具”菜单中。1. 找到“开发工具”菜单开发工具菜单在默认情况下没有出现在Excel的菜单...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 17,579
精华内容 7,031
关键字:

单选框