多选一的图片和文字

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

 效果图