精华内容
下载资源
问答
  • html5单选按钮1

    千次阅读 2017-08-15 10:15:59
    <!DOCTYPE html> <html lang="en"> <title>Document <input type="radio" name="user" value="1">1 <input type="radio" name="user" value="2">2 ...</html> ...
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>

    </head>
    <body>
    <form id="list" method="post" action="">
    <input type="radio" name="user" value="1">1
    <input type="radio" name="user" value="2">2
    <input type="radio" name="user" value="3">3
    </form>
    <input type="button" οnclick="usubmit();" >23
    <!--js-->
    <script language="javascript">
    function usubmit(action){//获取radio的value的方法
    var radios = document.getElementById("list").user;//获取id为list下的所有name为user的值的集合
    for(var i=0;i<radios.length;i++){//循环值得集合
    if(radionum[i].checked){//通过checked属性判断是否被选中
    userid = radionum[i].value//将被选择的radio的值赋给变量userid
    }
    }
    alert(userid)//弹出被选中的radio的值
    }
    </script>
    </body>
    </html>
    展开全文
  • HTML标签radio是单选按钮,正常情况下,我们只有点击单选框时才会被选中,这样非常不利于用户体验,所以我们一般会在使用单选按钮的时候,让用户即使点击到该单选按钮对应的文字上,也可以选择该单选按钮,使用的...

    HTML标签radio是单选按钮,正常情况下,我们只有点击单选框时才会被选中,这样非常不利于用户体验,所以我们一般会在使用单选按钮的时候,让用户即使点击到该单选按钮对应的文字上,也可以选择该单选按钮,使用的就是一个label的一个for属性,把这个for属性指定到radio的id值上即可:

     

    <input type="radio" id="male" name="sex" checked="checked" /><label for="male">男</label>  
    <input type="radio" id="female" name="sex" /><label for="female">女</label>  
    

     

    展开全文
  • Html单选按钮自定义样式

    千次阅读 2019-09-17 14:43:30
    前言: 某天,写了一个带有单选按钮的界面,突然想起网上其他网站各种各样的单选按钮,遂想“改下这个圆圈圈怎么样?”,于是在找了一遍单选按钮的样式,没一个说是修改圆圈圈,于是又去网上找了一遍,各种...

      前言:

      某天,写了一个带有单选按钮的界面,突然想起网上其他网站各种各样的单选按钮,遂想“改下这个圆圈圈怎么样?”,于是在找了一遍单选按钮的样式,没一个说是修改圆圈圈,于是又去网上找了一遍,各种各样,自己选了其中一种并稍加修改,感觉简单通俗易懂,而且最重要的是效果好,故在此和大家分享一下。
      

      原理:
        之前已经提及,html的单选按钮没有提供一个样式能修改其圆圈,所以仅靠一句类似“color:#fff”的语句是不可能的,不过考虑:
        (A)html每个input都可以加一个label,点击label,也会出发input的点击:

      
        (B)label标签可以加背景,并通过其他样式,让背景显示在文字的左边:           

      
        (C)input标签可以隐藏:                                

      
        (D)点击label后,可以通过JS,修改其背景图片:

      (此处为图片)

      看到这里有没有恍然大悟,什么自定义单选按钮的图标,不过是把单选按钮隐藏了,然后通过每次点击修改label的背景图片,达到自定义的效果,而且后期需要把单选按钮的图标换成花花草草猫猫狗狗,也不过是换下图片而已。如果还不能实现,我们接着往下细谈:

      实现:

      原理中说的四点,也可以看作实现的自定义单选按钮的四部曲:

      A:没啥好说的,就是标签使用。

    <label for="sex-man" class="radio_label checked">
        <input type="radio" value="1" checked="checked" id="sex-man" name="sex" /></label>

      B:

    设置背景: background: url(http://images.cnblogs.com/cnblogs_com/fly-show/907124/o_radio_bk.png) no-repeat;
    设置背景大小: background-size20px 40px;       (这里我的背景图是两个图标上下接在一起的,故高度为背景的两倍)
    设置显示方式: display: inline-block;    (设置label为行内块元素,让它能有宽高,而且不换行)
    设置高度和行高: height: 20px;line-height: 20px;
    设置文字靠右一点: text-indent:20px;

     

      C:隐藏单选按钮:    display:none;

      D: 这一步我使用的JQuery,主要为了方便。首先定义了一个被选中的css的class,另外给所有的单选按钮点击时都添加了一个方法:找出所有name相同的单选按钮的label,去掉他们被选中的样式,然后给自己加上一个选中的样式。

      选中的样式:

    .checked {
        background-position: 0 -20px;
    }

      这里我用了background-position,把背景图向上偏移20px,从而把选中的图片显示出来。

      添加点击处理方法:

    $(function(){
      //给所有的单选按钮点击添加处理 $(
    "input[type='radio']").click(function(){
         //找出和当前name一样的单选按钮对应的label,并去除选中的样式的class
         $(
    "input[type='radio'][name='" $(this).attr('name') "']").parent().removeClass("checked");
         //给自己对应的label
         $(
    this).parent().addClass("checked"); }); });

     附:源码

      最后:

      如果想修改其他标签,或者给其他标签(比如:多选框)添加样式,也可以尝试这种办法。

     

    展开全文
  • 帆软单选按钮实例In the old times, radios have some buttons to change stations that have saved to a specific button. HTML also provides radio buttons in order to one of the radio buttons in a group of ...
    帆软单选按钮实例

    帆软单选按钮实例

    In the old times, radios have some buttons to change stations that have saved to a specific button. HTML also provides radio buttons in order to one of the radio buttons in a group of them. Radio buttons in HTML are defined with the <input> tag because the Radio button is referred to as an input from the user.

    在过去,收音机具有一些按钮来更改已保存为特定按钮的电台。 HTML还提供了单选按钮,以便于一组单选按钮中的一个。 HTML中的单选按钮是用<input>标记定义的,因为单选按钮被称为来自用户的输入。

    单选按钮标签 (Radio Button Tag)

    We will define a radio button with the <input> tag by providing the type as radio like below. Radio button tag does not have an enclosing tag like </input> etc.

    我们将通过提供typeradiotype (如下所示)来定义带有<input>标签的单选按钮。 单选按钮标签没有像</ input>这样的封闭标签。

    <input type="radio">

    单选按钮组 (Radio Button Group)

    Radio buttons generally used as a group. Because the main usage case for the radio button is providing some choices to the user and the user selects one of them. So we generally provide multiple radio buttons as a group. In or der to create groups the radio buttons name attribute should be the same for all radio buttons in the same group. For example, if we want to ask the user age range we have to use the same name for all radio buttons like below.

    单选按钮通常作为一个组使用。 因为单选按钮的主要用法是向用户提供一些选择,然后用户选择其中之一。 因此,我们通常将多个单选按钮作为一组提供。 在创建组时,对于同一组中的所有单选按钮,单选按钮名称属性应相同。 例如,如果要询问用户年龄范围,则必须对所有单选按钮使用相同的名称,如下所示。

    <html>
       <body>
          <h2>Radio Buttons</h2>
          <form>
             <input type="radio" name="age" value="b18"> Below 18<br>
             <input type="radio" name="age" value="o18"> Between 18 and 65 <br>
             <input type="radio" name="age" value="o65"> Over 65  
          </form>
       </body>
    </html>
    Radio Button Group
    Radio Button Group
    单选按钮组

    设置默认单选按钮选择(Set Default Radio Button Selection)

    As one of the radio buttons is selected explicitly by the user the default behavior is all of the radio buttons are unselected. In some cases, we need to provide one radio button as selected by default. We can use checked attributed inside the input tag. In this example, we will provide the Between 18 and 65 selected o checked by default.

    由于用户明确选择了其中一个单选按钮,因此默认行为是未选中所有单选按钮。 在某些情况下,我们需要提供一个默认选中的单选按钮。 我们可以在输入标记中使用checked属性。 在此示例中,我们将提供默认情况下选中的Between 18 and 65 o。

    <html>
       <body>
          <h2>Radio Buttons</h2>
          <form>
             <input type="radio" name="age" value="b18" > Below 18<br>
             <input type="radio" name="age" value="o18" checked> Between 18 and 65 <br>
             <input type="radio" name="age" value="o65"> Over 65  
          </form>
       </body>
    </html>
    Set Default Radio Button Selection
    Set Default Radio Button Selection
    设置默认单选按钮选择

    检查给定单选按钮是否已选中(Check If Given Radio Button Selected)

    After selecting a radio button we can get or check selected radio button value in JavaScript. We can use different frameworks AngularJS, jQuery, etc but for simplicity, we will use plain JavaScript. We will get the values from the radio button name and iterate over it.

    选择单选按钮后,我们可以获取或检查JavaScript中选定的单选按钮值。 我们可以使用不同的框架AngularJS,jQuery等,但是为简单起见,我们将使用纯JavaScript。 我们将从单选按钮名称中获取值并对其进行迭代。

    <html>
       <body>
          <h2>Radio Buttons</h2>
          <form>
             <input type="radio" name="age" value="b18" > Below 18<br>
             <input type="radio" name="age" value="o18" checked> Between 18 and 65 <br>
             <input type="radio" name="age" value="o65"> Over 65  
          </form>
          <br>
          <input type=button onClick="ValidateForm()" value="Check Radio Buttons">
          <script type="text/javascript">
             function ValidateForm()
             {
                 var radioButtons = document.getElementsByName("age");
                 for(var i = 0; i < radioButtons.length; i++)
                 {
                     if(radioButtons[i].checked == true)
                     {
                         alert("You have selected"+radioButtons[i].value)
                     }
                 }
             }
          </script>
       </body>
    </html>

    禁用单选按钮 (Disable Radio Button)

    Radio buttons can be used in different scenarios with where in some cases they must be disabled. We can disable a radio button by using disabled attribute which will disable and prevent selection of the radio button. In this example, we will disable the Over 65 radio button.

    单选按钮可以在不同的情况下使用,在某些情况下必须禁用它们。 我们可以通过使用disabled属性来禁用单选按钮,该属性将禁用和阻止选择单选按钮。 在此示例中,我们将禁用“ Over 65单选按钮。

    <html>
       <body>
          <h2>Radio Buttons</h2>
          <form>
             <input type="radio" name="age" value="b18" align="left" > Below 18<br>
             <input type="radio" name="age" value="o18" checked> Between 18 and 65 <br>
             <input type="radio" name="age" value="o65" disabled> Over 65  
          </form>
          <br>
       </body>
    </html>
    Disable Radio Button
    Disable Radio Button
    禁用单选按钮

    单选按钮与复选框(Radio Button vs Check Boxes)

    Like the radio button, there are also checkboxes that provide selection in multiple choices. The main difference between the radio button and checkbox is only a single radio button can be checked at one but multiple checkboxes can be checked without a problem.  So radio button suites to single answer questions like age, gender, yes/no, etc. where checkboxes can be sued multiple answer questions like team, schools, cities, etc.

    像单选按钮一样,也有复选框提供多个选择。 单选按钮和复选框之间的主要区别在于,一次只能选中一个单选按钮,但可以无问题地选中多个复选框。 因此,单选按钮套件可用于回答单个答案问题,例如年龄,性别,是/否等。在这里,可以对复选框使用团队,学校,城市等多个回答问题。

    翻译自: https://www.poftut.com/html-radio-button-tutorial-with-examples/

    帆软单选按钮实例

    展开全文
  • 本篇文章主要的向大家介绍了关于html input标签的单选按钮的使用方法,还有关于HTML input标签的单选默认按钮的做法。接下来我们一起来看看这篇文章吧 打造全网web前端全栈资料库(总目录)看完学的更快,掌握的...
  • html单选按钮

    2017-05-25 07:09:03
    表单中添加单选按钮 心理测试 冬日一个人散步,最希望看到什么景色? 螃蟹 红叶 姑娘 黑鹤
  • Html单选按钮自定义

    千次阅读 2016-04-14 19:44:46
    html单选按钮没有提供一个样式能修改其圆圈 所以我们不再使用标签 我们可以使用label标签,通过以下原理实现单选按钮: (A)label标签可以加背景,并通过其他样式,让背景显示在文字的左边; (B)点击label后,...
  • HTML radio 单选按钮

    千次阅读 2016-11-15 22:53:02
    今天要写的页面上有一个单选按钮的标签,或者说控件。然后写了几次,发现总是写不对,两个选项总是可以同时选中。记得刚学HTML的时候,这个是很简单的一个标签。于是上网看网页加自己动手实验,找到了问题所在。 ...
  • html单选按钮默认选择

    千次阅读 2020-04-24 21:21:34
    页面需要一个选择性别的单选按钮,要求默认是根据后台返回值来选择“男”或“女”,然后可以手动进行修改。注:下图中单选按钮的按钮是图片,根据是否被选中来显示不同的图片。 先写出性别里的两个单选按钮。 <...
  • HTML的radio单选按钮

    2019-02-11 15:15:26
    HTML中的radio单选按钮实现男女性别选择,普遍逻辑肯定是只能选择其中一个,要实现这个功能可以在 “input” 标签里加一个name属性,并设置name属性值相同即可! 例如: 男 (checked表示默认已选中) 女 这样就...
  • 另外我想用JS控制 点击单选前面的文字 来选择按钮 PS:不是要用label,是用JS
  • html页面,单选按钮应该怎么写? ![每条数据都有对应的单选按钮](https://img-ask.csdn.net/upload/201707/20/1500530859_879659.png) ![html页面,单选按钮代码]...
  • html input标签 单选按钮 radio

    万次阅读 2018-12-22 19:13:04
    单选按钮 radio : 只能从选项列表中选择一项,选项与选项之间相互排斥 语法: &lt;input type="radio" name="单选按钮所在的组名" value="单选按钮的取值"&gt; 相同的 ...
  • 一、Radio单选按钮组水平排列。 html代码: <div class="col-xs-3"> <label class="form-label col-md-4">试用月绩效奖金</label> <div cl
  • html单选按钮

    千次阅读 2017-08-16 11:57:26
    创作者留言查询后台    多房间查询    单房间查询        账号或者密码错误      
  • html radio单选按钮JS脚本控制

    千次阅读 2013-03-20 16:38:57
    html radio单选按钮JS脚本控制 raido格式 使用JS脚本判断是否有name为test的radio被选中,并alert选中radio的值。 function checkradio(){  var test=document.getElementsByName("test");//这里得到name为test...
  • 单选按钮允许你选择单一的值来提交表单。 属性 描述 name 字符串,相同name的radio会成组,选择那按钮组的任何单选按钮将会自动取消同组当前选择的任何按钮 checked 布尔值,true表示被选中,false表示未被...
  • HTML表单:单选按钮

    千次阅读 2020-08-17 01:32:26
    If you are old enough, an easy way to remember the purpose of radio buttons is to recall old car radios: 如果年龄足够大,记住单选按钮用途的一种简单方法是调出旧的汽车收音机: HTML “radio buttons” ...
  • <form action="" method="get"> 姓名:<input type="text" name="name"><br> 年龄:<input type="text" name="age">...input type="radio" value="female" checked="checked" name="sex">...
  • MVC5使用单选按钮与下拉框

    千次阅读 2016-11-01 15:43:35
    某人认为下拉列表的呈现形式不如单选按钮漂亮,我只好去测试一下单选按钮与下拉框了。测试代码如下: 1.model类Blog.cs(类型使用枚举类型,自动生成的视图会以下拉列表形式显示): using System.ComponentModel; ...
  • HTML radio 实现性别的单选按钮用法

    千次阅读 2018-04-05 13:26:04
    Radio ObjectRadio 对象代表 HTML 表单中的单选按钮。在 HTML 表单中 &lt;input type="radio"&gt; 每出现一次,一个 Radio 对象就会被创建。单选按钮是表示一组互斥选项按钮中的一个。当一个按钮...
  • 5分钟DIY一个自定义单选框单选按钮

    万次阅读 2017-01-05 00:07:19
    上次写博已经是两个月前了,这两个月七搞八搞学了不少黑科技日后必会分享给大家~下面咱们就开门见山了由于浏览器本身自带的单选按钮且不说好看不好看,各大浏览器厂商也是一人一个样儿想要统一效果相对来说比较麻烦...
  • 本篇学习HTML中的表单,我们知道,登录和注册页面一般都写在...今天我们先来看看表单中的文本输入框和单选按钮如何使用。 场景:我们想做一个,在网页注册中常见的,输入用户名和选择性别的场景,相关html代码如下。
  • HTML 单选按钮(性别实现)

    千次阅读 2018-09-05 16:35:32
    今天要写的页面上有一个单选按钮的标签,或者说控件。然后写了几次,发现总是写不对,两个选项总是可以同时选中。记得刚学HTML的时候,这个是很简单的一个标签。于是上网看网页加自己动手实验,找到了问题所在。 ...
  • 获取html单选按钮radio的value值

    千次阅读 2018-10-31 10:24:53
    获取html单选按钮radio的value值 #由于长时间没有使用,给忘了,然后百度了一下,都是些扯淡的答案,很基础,百度了很久,试了很久,于是决定把这个正确的方案记录下来 $(function(){ $("#bankCardNext")....
  • HTML的radio单选按钮无效

    千次阅读 2020-03-20 15:58:19
    今天学习写一个表单,用到radio的时候发现实现不了单选功能,点击另一个的选项,原来默认的选项还是保持选择状态.如图所示 解决办法 修改name的值为同一个名称. 修改前: 修改后: 再次运行的结果,实现单选功能: ...
  • 四选一单选按钮html实现

    千次阅读 2019-01-07 17:28:41
    -- 只能单击按钮才能选中 --&gt; &lt;input type="radio" name="demo" /&gt;单选A &lt;input type="radio" name="demo" /&gt;单选B &lt;input ...
  • js 单选按钮/多选按钮 选中

    千次阅读 2019-07-11 17:43:02
    js 单选按钮/多选按钮 选中 eg:1、单选前端DIV引入图片 html <ul class="import_option"> <li> <div class="no_radio y_radio"></div> <span class="opt-text">头皮针</span...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 73,147
精华内容 29,258
关键字:

html5单选按钮