精华内容
下载资源
问答
  • Html5中的单选框和复选框

    千次阅读 2019-09-19 14:18:48
    radio - 单选框 element/form/input/radio.html <!doctype html> <html> <head> <title>radio</title> </h...

    radio - 单选框
    element/form/input/radio.html

    <!doctype html>
    <html>
    <head>
    <title>radio</title>
    </head>
    <body>

    <!--
    radio - 单选框
    checked - 是否是选中状态
    name - 相同的是同一组
    -->

    <input id="rad" type="radio" checked name="rad" />
    <label for="rad">radio button title</label>

    <input id="rad2" type="radio" name="rad" />
    <label for="rad2">radio button title</label>

    <script type="text/javascript">

    alert(document.getElementsByTagName(
    "input")[0].value);

    </script>

    </body>
    </html>


    checkbox - 复选框
    element/form/input/checkbox.html

    <!doctype html>
    <html>
    <head>
    <title>checkbox</title>
    </head>
    <body>

    <!--
    checkbox - 复选框
    checked - 是否是选中状态
    -->

    <input id="chk" type="checkbox" checked />
    <label for="chk">checkbox title</label>

    <script type="text/javascript">

    alert(document.getElementsByTagName(
    "input")[0].checked);

    </script>

    </body>
    </html>
    展开全文
  • html文件里的简单的单选框: &lt;div class="form-group has-feedback"&gt; 账单分类:&lt;br/&gt; &lt;input type="radio" class="control-label" id="...

    html文件里的简单的单选框:

    <div class="form-group has-feedback">
        账单分类:<br/>
        <input type="radio" class="control-label" id="richang" value="日常支出" name="category" checked/>日常支出
        <input type="radio" class="control-label" id="dae" value="大额支出" name="category" />大额支出
    </div>

     bootstrap模态框里的单选框:(本来还以为和普通的不一样,我是前端小菜哈)

    <div class="form-group">
        <label for="category" class="control-label">账单分类:</label><br />
        <input type="radio" class="control-label" id="richang" value="日常支出" name="category" checked/>日常支出
        <input type="radio" class="control-label" id="dae" value="大额支出" name="category" />大额支出
    </div>

    但它们在js里取值是同一种方式:

    var category = $('input:radio[name="category"]:checked').val();
    

     

    展开全文
  • html 单选框

    千次阅读 2014-08-14 16:32:10
    1、单选框 ;width:36px;size:30px;"> 记住密码 2、判断状态  function myFunction() {  if( document.getElementById("checkbox1").checked==true ) {  alert("sddddddddddddddd");  }  ...

    1、单选框

    <input type="checkbox" id="checkbox1" name="checkbox1" value="checkbox" style="height:36px;width:36px;size:30px;"> 记住密码 <br />
    2、判断状态

    <script>
        function myFunction() {
            if( document.getElementById("checkbox1").checked==true ) {
                alert("sddddddddddddddd");
            }
        }
    </script>

    3、初始选中

    checked='checked'

    <input type="checkbox" checked='checked'> 记住密码 <br />


    展开全文
  • 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;
        }
    
    展开全文
  • html单选框与复选框

    千次阅读 2017-06-19 12:20:30
    使用语法:值" name="名称" checked="checked"/>1、当 type=”radio” 时,控件为单选框;当 type=”checkbox” 时,控件为复选框2、value:提交数据到服务器的值(给后台程序PHP使用)3、name:为控件命名,给ASP、...
  • HTML基础1:单选框

    千次阅读 2021-04-07 22:59:01
    3.若存在多个单选框都在一个分组里,要实现同一时间只能选中一个单选框设置name属性相同即可。 4.提交数据到后台时,后台接收的是value设置的值 二.案例 目标:利用JQuary,点击单选框时将当前单选框设置为checked,...
  • 单选框: <input type="radio/checkbox" value="值" name="名称" checked="checked"/> 1、type: 当type="radio"时,控件为单选框 当type="checkbox"时,控件为复选框 2、value:提交数据到服务器的值...
  • HTML 单选框实现单选注意事项

    千次阅读 2017-02-27 19:30:29
    今天在实现一个中国的30个省份单选框的时候用的 input />框, 开始实现单选的时候居然不行,最后发现要想在一系列单选按钮下实现, 必须把input的name属性的名字全部写成一样的才行,教训啊,之前学过的居然疏忽...
  • uniapp单选框和获取单选框的值

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

    千次阅读 2019-03-09 20:16:41
    单选框 type=&amp;quot;radio&amp;quot; 表示这是一个单选框。 name=&amp;quot;sex&amp;quot; 将来用于服务器取值使用。 注意:如果多个单选按钮时互斥关系,那么,就必须把这多个按钮看做一...
  • html 单选框、复选框 点击文字选中

    千次阅读 2018-01-17 12:35:03
    html 单选框、复选框 点击文字选中 示例1(单选框) type=&quot;radio&quot; value=&quot;1&quot; id=&quot;score1&quot;&gt;for=&quot;score1&quot;&gt;1 示例2(复选...
  • 单选框radiobox和复选框checkbox在网页中也十分常见,虽然它没有按钮的交互性强,但是如果能把它们像按钮那样美化一下,那也是非常不错的。本文收集了10个相对比较漂亮的美化版单选框和复选框,希望你会喜欢。1、CSS...
  • html单选框改变样式

    千次阅读 2019-06-01 00:56:47
    https://www.cnblogs.com/xinjie-just/p/7302020.html (这个非常关键) https://blog.csdn.net/mqy1023/article/details/78700433 https://blog.csdn.net/qq_34182808/article/details/79992465
  • jquery实现HTML复选框变单选框

    千次阅读 2016-07-14 13:57:22
    jquery实现HTML复选框变单选框 $(document).ready(function(){ $(":checkbox").click(function(){ if($(this).attr("checked")!='') $(this).sibling
  • h5 radio单选框样式设置

    千次阅读 2019-10-07 08:08:53
    radio单选框样式设置 input[type=radio] { display: inline-block; vertical-align: middle; width: 20px; height: 20px; -webkit-appearance: none; background-color: transparent...
  • html单选框默认样式比较单一,结合网上相关内容在此做个关于修改radio样式的记录。 html结构如下: <input type="radio" name="zoom" id="zoom1" value="enlarge" checked /> <label for="zoom1">放大&...
  • //先将单选框的文本清空 //S.xld_btn1.txt.text是舞台上的"xld_btn1影片剪辑",txt是指文字,text指文字内容 if(!S.xld_btn1.btn_0.hasEventListener("click")) { S.xld_btn1.btn_0...
  • 一:目前只找到着两种方法可以回显单选框的数据: 1:根据value值确定单选 $("input[type=radio][name='remindFlg'][value='0']").attr("checked",'checked'); 回显单选框例子: 前端页面代码 <tr> &...
  • HTML修改单选框多选框按钮样式

    千次阅读 2016-11-22 18:05:40
    <!--html--> 车内净化 <input type="radio"
  • html点击文字选中单选框

    千次阅读 2019-03-15 17:04:53
    效果:点击文字也能选中单选框 &lt;label for="sex1"&gt;&lt;input type="radio" id="sex1" name="sex" value="0"&gt;男&lt;/label&...
  • HTML5美化版复选框和单选框(转载)

    千次阅读 2018-12-07 14:55:08
    https://www.html5tricks.com/10-pretty-checkbox-radiobox.html 效果还挺好看的,留着看
  • jQuery实现遍历单选框

    千次阅读 2016-05-21 23:02:41
    1、问题背景 有四个单选框,分别为一年四季,现在需要判断是否选中,如果选中这个单选框,就将其值赋值给输入框2、实现源码 遍历单选框 #result{ width: 200px; } $(document)....
  • 如下单选框(圆圈)里面有阴影效果(左上的半圆有阴影) 这种层次感,,,,怎么实现??? 我有一个参考地址:w1w1w.1codesky1.1net/1article/200903/169861.html(请去掉article前面的所有的1)但是没效果,缺了...
  • 单选框跳转不同页面

    千次阅读 2019-05-31 15:48:40
    作为这方面的学习者,今天我就来介绍一下复选框以及利用单选框来实现跳转不同的页面。 首先呢 我就来简单的介绍一下单选框。 什么是单选框呢 就是页面可以选择多个的按钮其中一个。 那么有单那就肯定有复选框啦。复...
  • html单选框(性别选择)

    千次阅读 2019-10-03 00:34:12
    在写单选框时,如何实现只能同时只能选择一个radio。 将name设置为一样的数值;代码如下: <input class="myforms-3-2" type="radio" checked ="checked" name="2" value="sex1">男 <input class=...
  • 本篇文章主要给大家介绍HTML怎么设置复选框以及单选框的。 我们在网站开发过程中,有时会需要实现类似调查问卷的功能,那么既然是问卷,就避免不了单选或者多选的情况。对于新手朋友来说,或许不太清楚。 下面我们就...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 85,062
精华内容 34,024
关键字:

html5单选框