多选一的图片和文字

利用 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>

 效果图