zoukankan      html  css  js  c++  java
  • 多选一的图片和文字

    利用 radio 做单选事件,js 兄弟选择 nextSibling 获取邻近的图片对象,然后进行改变

    例子:

    CSS

    <style type="text/css">
                input[type="radio"] {
                    display: none;
                }
                label{
                    font-size: 16px;
                }
                .choose_or{
                    width: 1.2rem;
                    height: 1.2rem;
                    margin-right: 0.5rem;
                }
                .pact_left{
                    width: 50%;
                    height: 2.5rem;
                    line-height: 2.5rem
                }
                .pact_right{
                    width: 50%;
                    height: 2.5rem;
                    line-height: 2.5rem;
                    position: relative;
                    left: 50%;
                    top: -2.5rem
                }
            </style>

    body代码

    <div class="white-bc contract-mould-style" >
      <p>合同模板类型</p>
      <div class="pact_left">
        <label onclick="change()"><input type="radio" name="test" /><img src="img/no_choose.png" class="choose_or">标准合同模版类</label>
      </div>
      <div class="pact_right">
        <label onclick="change()"><input type="radio" name="test" /><img src="img/no_choose.png" class="choose_or">非标准</label>
      </div>                         
    </div>

    js代码

    <script>
        //合同选择图片改变
        function change()
        {
            var radio = document.getElementsByName("test");
            /*用ByName是为了取到所有的radio*/
            var radioLength = radio.length;
            var ns;
            for(var i = 0;i < radioLength;i++)
            {
                if(radio[i].checked)
                {
                    ns = radio[i].nextSibling;
                    ns.src = "img/choose.png";
                }else {
                    ns = radio[i].nextSibling;
                    ns.src = "img/no_choose.png";
                }
            }
        }
    </script>

     效果图

  • 相关阅读:
    redis-x64-3.2.100下载安装
    open with live server没反应
    JavaScript 语言的历史
    在navicat查看mysql的版本
    node.js安装教程
    个人简介
    C语言结课课程设计
    CommonJS 规范 与 ES6 规范
    大文件分片上传,断点续传,秒传
    babel编译
  • 原文地址:https://www.cnblogs.com/wanlibingfeng/p/9264077.html
Copyright © 2011-2022 走看看