Span模拟单选按钮Radio

最新推荐文章于 2023-03-01 15:44:42 发布
最新推荐文章于 2023-03-01 15:44:42 发布
阅读量346 收藏 2
点赞数 2
文章标签： javascript php xhtml ViewUI
原文链接：https://my.oschina.net/yjft/blog/1551924
版权

为什么80%的码农都做不了架构师？>>>   hot3.png

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>【购物颜色、尺寸选择】Span模拟单选按钮Radio</title>


    <style type="text/css">
        .unchecked {
            border: 1px solid gray;
            padding: 6px 6px 6px 6px;
            cursor: pointer;
        }

        .checked {
            border: 2px solid #c00;
            padding: 6px 6px 6px 6px;
            cursor: pointer;
        }
    </style>


</head>

<body>
</body>


<script type="text/javascript" src="../js/chapterlist/jquery-1.7.1.min.js"></script>





<script type="text/javascript">




    var obj = {
        colorSpan: "",
        sizeSpan: "",
        chandi:""
    };



    function change(span) {
        $('span[name="' + $(span).attr('name') + '"]').each(function () {
            if (this.checked && this != span) {
                this.className = "unchecked";
                this.checked = false;
            }
        });
        obj[$(span).attr('name')] = span.innerHTML;
        span.className = "checked";
        span.checked = true;
        select();
    }



    function select() {
        var html = '';
        for (var i in obj) {
            if (obj[i] != '') {
                html += '<font color=orange>"' + obj[i] + '"</font> 、';
            }
        }
        html = '<b>已选择:</b> ' + html.slice(0, html.length - 1);
        $('#resultSpan').html(html);

    }


</script>


<div>
    颜色:
    <span class='unchecked' name='colorSpan' checked='false' οnclick='change(this);'>卡其格</span>
    <span class='unchecked' name='colorSpan' checked='false' οnclick='change(this);'>黑白格</span>
</div>


<br/>
<br/>



<div>
    尺码:
    <span class='unchecked' name='sizeSpan' checked='false' οnclick='change(this);'>S</span>
    <span class='unchecked' name='sizeSpan' checked='false' οnclick='change(this);'>M</span>
    <span class='unchecked' name='sizeSpan' checked='false' οnclick='change(this);'>L</span>
</div>




<br/>
<br/>





<div>
    产地:
    <span class='unchecked' name='chandi' checked='false' οnclick='change(this);'>北京</span>
    <span class='unchecked' name='chandi' checked='false' οnclick='change(this);'>上海</span>
    <span class='unchecked' name='chandi' checked='false' οnclick='change(this);'>陕西</span>
</div>







<br/>
<br/>




<div>
    <b>提示:</b>
    <span id='resultSpan'></span>
</div>



</html>

 

151420_DNC7_1182885.png

应用如下：

<?php

session_start();

!empty($_SESSION["sc"]) ? $sc = $_SESSION["sc"] : $sc = 0;//星数
!empty($_SESSION["exp"]) ? $exp = $_SESSION["exp"] : $exp = 0; //经验值
!empty($_SESSION["nickname"]) ? $nickname = $_SESSION["nickname"] : $nickname = "游客"; //昵称
!empty($_SESSION["avatar"]) ? $avatarUrl = $_SESSION["avatar"] : $avatarUrl = "./images/anony2.png"; //缩略图
isset($_SESSION["is_login"]) ? $is_login = $_SESSION["is_login"] : $is_login = null; //登陆标志位

/*
$sc = $_SESSION["sc"];
$exp = $_SESSION["exp"];
$nickname = $_SESSION["nickname"];
$avatarUrl = $_SESSION["avatar"];
$is_login = $_SESSION["is_login"];*/


/**
 * @param $sc
 * @param $avatarUrl
 * @param $nickname
 * @param $exp
 * @return string
 */

function isLoginText($sc = 0, $avatarUrl = "./images/anony2.png", $nickname = "游客", $exp = 0)
{

    $temp = <<< EOF
            <div class="user_record clearfix">
                <a id="my_news" target="_blank" href="./myhome.php"></a>
                <a class="user_avator" target="_blank" href="./myhome.php">
                    <img src="{$avatarUrl}"/>
                    <span class="name_in_banji ellipsis" title=""></span>
                </a>
                <div class="user_info">
                    <div class="user_nickname ellipsis" title="{$nickname}>"><a target="_blank" href="./myhome.php">$nickname</a>
                    </div>
                    <div class="user_exp">
                        <div class="user_exp_progress" id="exp" style="width:0px" data-number="70">
                            <span class="user_exp_star">$sc</span>
                            <span class="user_exp_num" id="exp_num" data-number="{$exp}">$exp</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="last_records_title">
                <div class="last_records_item">
                    <div class="num">0</div>
                    <div>今日做题数</div>
                </div>
                <div class="last_records_item">
                    <div class="num">0</div>
                    <div>坚持天数</div>
                </div>
                <div class="last_records_item">
                    <div class="num">0</div>
                    <div>总做题数</div>
                </div>
            </div>
EOF;

    return $temp;

}


?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>


    <script type="text/javascript" src="./js/index/12ArWF.js?t=1441100803"></script>
    <script type="text/javascript" src="js/index/index_diy.js?t=1460702878"></script>
    <script type="text/javascript" src="http://test.91xiaoyu.com/plus/layer/layer.js"></script>


    <link href="./css/index/9Gkmx-rq1yM.css?t=1459938934" rel="stylesheet" type="text/css"/>
    <link href="./css/index/crFms-mfd7J-9p19o.css?t=1501238479" rel="stylesheet" type="text/css"/>


    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>韩教授难题训练-小雨在线-云课堂</title>
    <meta name="applicable-device" content="pc"/>


    <style type="text/css">
        .unchecked {
            border: 1px solid #ccc;
            padding: 8px;
            cursor: pointer;
            margin: 0 16px 16px 0;
            border-radius: 5px;
        }

        .checked {
            cursor: pointer;
            background-color: #4FD768;
            color: #FFF;
            padding: 8px;
            border-color: #4FD768;
            margin: 0 16px 16px 0;
            border-radius: 5px;
        }
    </style>

</head>
<body>

<div class="global_canvas" style="background-image:url(./images/default3.jpg)"></div>

<script>

    var width = window.screen.availWidth;
    var height = window.screen.availHeight;
    if (typeof window.orientation == 'number') {
        if (window.orientation == 0 || window.orientation == 180) {
        } else {
            height = window.screen.availWidth;
            width = window.screen.availHeight;
        }
    }

    if (width > 1.77 * height) {
        $(".global_canvas").css("background-size", width + "px");
    } else {
        $(".global_canvas").css("background-size", "auto " + height + "px");
    }

</script>


<div class="wrapper clearfix">
    <div class="wrapper_left">
        <div class="side_bar">
            <a class="sb_item sb_set_grade ">
                请选年级
                <div class="sb_set_grade_arrow"></div>
            </a>
            <div class="grades">
                <a class="sb_item sb_grade grade_10 " href="javascript:;">小学</a>
                <a class="sb_item sb_grade grade_20 selected hjs_chuzhu" href="javascript:;">初中</a>
                <a class="sb_item sb_grade grade_30" href="javascript:;">高中</a>
            </div>
            <div class="sb_item sb_item_qr">
                <img src="./images/qr.png" style="width:98px;">
                <div>
                    <div style="font-size: 14px;margin-top: 6px;">
                        扫码下载APP
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="wrapper_right2 clearfix">
        <div class="courses">
            <div class="course course_1" style="top:110px;margin-left:-74px">
                <div class="course_img">
                    语文
                </div>
                <a class="course_href" href="javascript:;"></a>
            </div>


            <div class="course course_2" style="top:202px;margin-left:-166px">
                <div class="course_img">
                    数学
                </div>
                <a class="course_href" id="shuxue1" href="javascript:;"></a>
            </div>


            <div class="course course_4" style="top:202px;margin-left:18px">
                <div class="course_img">
                    物理
                </div>
                <a class="course_href" href="javascript:;"></a>
            </div>


            <div class="course course_5" style="top:294px;margin-left:-74px">
                <div class="course_img">
                    化学
                </div>
                <a class="course_href" href="javascript:;"></a>

            </div>


        </div>


        <!--右侧信息-->
        <div class="last_records">


            <?php

            if ($is_login === "bl4ctruxojGx3C5Y") {

                echo isLoginText($sc, $avatarUrl, $nickname, $exp);
            } else {
                echo isLoginText();
            }


            ?>


            <!--历史记录-->

            <div class="last_records_course">
                <div class="last_records_course_items">

                </div>
            </div>

            <!--历史记录结束-->


        </div>
    </div>


</div>


<div class="wrapper_versions">
    <div class="select_versions">

        <div class="versions_title clearfix">
            <div class="vt_text">请选择-年级/学期</div>
            <div class="vt_close"></div>
        </div>


        <div class="version_container clearfix">


            <div>
                年级:
                <span class='unchecked' name='grade' data-attr="211" checked='false' οnclick='change(this);'>初一</span>
                <span class='unchecked' name='grade' data-attr="212" checked='false' οnclick='change(this);'>初二</span>
                <span class='unchecked' name='grade' data-attr="213" checked='false' οnclick='change(this);'>初三</span>
                <span class='unchecked' name='grade' data-attr="231" checked='false' οnclick='change(this);'>中考</span>
            </div>

            <br><br>


            <div>
                学期:
                <span class='unchecked' name='xueqi' data-attr="0" checked='false' οnclick='change(this);'>上学期</span>
                <span class='unchecked' name='xueqi' data-attr="1" checked='false' οnclick='change(this);'>下学期</span>
            </div>


            <br><br>

            <div>
                <b>提示:</b>
                <span id='resultSpan'></span>
            </div>


        </div>

        <div class="version_options">
            <div class="version_cancel">取消</div>
            <div class="version_confirm" data-grade="213" data-xueqi="0">确认</div>
        </div>


    </div>
</div>


<script>
    $(document).ready(function () {

        //test
        layer.msg('目前还在开发中...');


        $(".sb_set_grade").bind("click", function () { //控制左侧年级显示隐藏
            $(".grades").toggle();
            $(".sb_set_grade").toggleClass('down');
        });

        num_animation();//数字加载动画

        $('.vt_close,.version_cancel').click(function () { //弹窗取消隐藏
            $('.version_name').removeClass('selected');
            $('.v_original').addClass('selected');
            $('.wrapper_versions').hide();
            $('.version_name').hide();
        });


        //修改2017-10-17

        $('.hjs_chuzhu').click(function () { //弹窗显示


            $('.vc_3').show();

            $('.wrapper_versions').show();


        });



        //新增提示2017-09-29
        $(".course_href,.grade_10,.grade_30").click(function (event) {

            if (event.target.id === "shuxue") {
                window.location.href = "./chapterlist.php?course_id=2";
            } else {
                event.preventDefault();
                layer.msg('目前只开通数学模块！', function () {
                    return false;
                });
            }

        });


    });
</script>


<script type="text/javascript">


    var obj = {
        grade: "",
        xueqi: ""
    };

    function change(span) {
        $('span[name="' + $(span).attr('name') + '"]').each(function () {
            if (this.checked && this != span) {
                this.className = "unchecked";
                this.checked = false;
            }
        });
        obj[$(span).attr('name')] = span.dataset.attr;
        span.className = "checked";
        span.checked = true;
        select();
    }


    function select() {
        var html = '';
        for (var i in obj) {
            if (obj[i] != '') {

                html += obj[i]+"@";
            }
        }
        html = html.slice(0, html.length - 1);

        $('#resultSpan').html(html);

    }


</script>


</body>
</html>

 

161954_GZcT_1182885.png

转载于:https://my.oschina.net/yjft/blog/1551924

weixin_33853827
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html span成为按钮,a和span组合定义按钮样式实例分享按
weixin_35133182的博客
06-16 1410
html标签中的a和span问题和的区别？那个好用？a标签是给网页加链接的，或者单独给文字设定样式的。span标签是内联元素。div和Span及a标签的区别可定义文档中的分区或节(division/section)。 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。 如果用 id 或 class 来标记 ，那么该标签的作用会变得更加有效。要做的效果是这...
解决（html标签）span、div标签模拟按钮点击时标签内部文本会被选中（类似于鼠标长按选择的情况）
BigFamer的博客
05-18 2594
一、前言 出于需要，我没有直接用button标签和element的el-button标签，我用span模拟了一个标签，并且给与了一个点击事件，但是较快的点击这个模拟按钮，会出现自动选中其中的文本的现象，类似于鼠标长按选择文本的那种情况。造成了不好的体验，我提供一种解决方案。 二、demo展示（直接上图） 未处理之前(点击速度稍微较快就会选中） 处理之后（正常了） 哈哈，其实这里应该使用Gif的，但是，领会精神就好，嘻嘻。 三、解决方案 出现选中情况时候的代码（未解决之前） <span class=
span标签的使用场景
奶厂小程的博客
03-01 4625
span标签的使用笔记，如何使用span标签的场景
a和span组合定义按钮样式
u013630876的专栏
05-07 1990
[html] view plaincopyprint? style type="text/css">   a:link {       color: #3B5998;       text-decoration: none;   }      .ui-base-button {       background-image: url("a-bg.png"
button模拟实现单选框效果
changchang_的博客
09-13 1518
一、功能实现 采用一组button组件，实现类似单选框radio的效果，即在同一组button组件中，只能选中一项（单选）。 方法一： 写死（按钮不多，容易操作） <van-button v-on:click="getVioMoney('50')" >50元</van-button> <van-button v-on:click="getVioMoney('100')" >100元</van-button> <van-button v-on:..
span按钮disabled属性无效
热门推荐
tianxingyun的专栏
12-10 1万+
span标签使用disabled属性没有效果，标签仍然可以被点击。 解决方案： 使用css属性pointer-events ,设置为none可以禁止点击事件： span{ pointer-events:none; } 恢复点击事件： span{ pointer-events:auto; } pointer-events属性介绍 1、阻止用户的点击动作产生任何效果...
jQuery模仿单选按钮选中效果
11-25
2. **模拟单选按钮的选中状态**： - 使用 `toggleClass()` 方法：jQuery的 `toggleClass()` 方法可以添加或移除指定的CSS类，这在处理按钮的选中和未选中状态时非常有用。在单选按钮的场景下，我们给选中的按钮添加...
js实现iPhone界面风格的单选框和复选框按钮实例
10-23
在网页设计中，为了提供与iOS设备用户界面相匹配的体验，开发者经常使用自定义的样式来呈现传统的HTML表单元素，如单选框（radio）和复选框（checkbox）。本实例通过JavaScript，特别是jQuery库，实现了模拟iPhone...
checkbox单选复选按钮美化代码.zip
07-05
Checkbox（单选按钮）和Radio（复选按钮）作为用户交互的基础组件，它们的样式往往直接影响到网站或应用的整体视觉效果。"Checkbox单选复选按钮美化代码.zip" 提供了一种使用CSS3技术来提升这些元素视觉吸引力的方法...
用CSS和JAVASCRIPT自定义单选按钮(仿XP按钮)
02-13
这段CSS代码中，`.radio-container`用于包裹单选按钮，`radio-button`则为自定义的按钮样式。当单选按钮被选中时，通过`::before`伪元素创建一个小圆点，模拟选中的状态。 **JavaScript交互** 为了使自定义按钮...
<span>按钮切换
55555的博客
01-25 1003
按钮切换 $(document).ready(function(){ $("#layout-t span:last").addClass("current"); $("#layout-t span").click(function(){ $(this).addClass("current").siblings("span").removeClass("current");
波浪按钮~
qq_53663696的博客
03-05 854
文章目录前言一、如何产生波纹效果？二、实现步骤1.写一个button内嵌一个span2.写按钮样式：(具体样式自定)3.写span标签样式：(具体样式自定)4.动画效果：(具体样式自定)5.JavaScript部分总结 前言 点击按钮会产生波纹效果，也可以弄成途径按钮产生波纹效果。请耐心看完谢谢。 tips：以下是本篇文章正文内容，下面案例可供参考 一、如何产生波纹效果？ 可以通过button按钮内嵌span标签，然后给span标签添加样式扩大的2d动画，这里采用的是原先就写死一个span在button
关于用span模拟radio传值的问题
weixin_42680885的博客
10-23 417
最近在做一个注册界面 有个企业规模的选项.是四个单选框. 而问题是源码是这样的: &lt;li&gt;&lt;label class="ml10"&gt;&lt;span class="mn-radio-item &lt;c:if test="${custComp.compScale eq 2}"&gt;mn-selected&lt;/c:if&gt;"&gt;&
Android系统Span的应用
RungBy的博客
11-30 587
Android系统Span的应用使用方法应用1：创建一个会折叠和展开的textView知识储备前三行String的内容如何获取staticlayout的获取 资料来源 资料1：探索 Android 中的 Span 资料2：Android花样Text设置神器之SpanableString 使用方法 // 设置span效果 public void setSpan(Object what, int s...
多选和单选框
ckyue1219的博客
04-22 382
单选框实现选中不同选项页面变化： radio 1.html <table class="m-table m-table-rds" style="width: 100%;margin-top:10px;" align="center"> <tbody> <tr> <th style="width:25%;text-align:right;"><span style="color:red;margin:3px;">*<
span做成按钮时，文字不被选中样式
小妖666个人笔记
10-10 2080
今天用span做成按钮，但是每次双击都会选中span内容，很不和谐。怎么办呢？ 添加下面样式即可，亲测ie和谷歌浏览器没问题： .button { display: inline-block; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-s...
Java面试题(3) 通过css样式定义span标签实现button按钮属性
郑清
02-11 9102
&lt;span&gt;我是按钮&lt;/span&gt; 通过css样式定义span标签实现button按钮属性 --&gt; 实现方法： &lt;span style="cursor: pointer;background-color: #4CAF50;color: white;padding: 15px 32px;display: inline-block;font-size: 15px;...
模仿单选按钮
菜鸟丹丹的博客
08-02 417
$(this).addClass(“active”).siblings().removeClass(“active”) active是选中的样式
button单选按钮
最新发布
09-03
Button单选按钮是一种类似于单选框（radio）的UI组件，用于在同一组Button组件中只能选择一项。通过使用一组Button组件，我们可以实现单选的效果。 然而，在实际应用中，可能会遇到一个问题，即选中的按钮在点击...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值