radio单选框的点击问题

        <form>
            <div class="radio">
                <input type="radio" name="radio_1" id="zhifubao" class="zhifubao" src="balance_zhifubao.html" onclick="radioPic()">
                <label for="zhifubao" ><img src="img/zhifubao.png" class="zhifubao_img" ><span>支付宝</span><img class="select" src="img/select_no.png"></label>
            </div>
            <div class="radio">
                <input type="radio" name="radio_1" id="yizhifu" class="yizhifu" src="balance_yizhifu.html" onclick="radioPic()">
                <label for="yizhifu" ><img src="img/yizhifu.png" class="yizhifu_img" ><span>翼支付</span><img class="select" src="img/select_no.png"></label>
            </div>
        </form>

function radioPic() {
    var radios = document.getElementsByName("radio_1");
    var selectPic = document.getElementsByClassName("select");
    for (var i = 0; i < radios.length; i++) {
        console.log(radios[i].checked);
        if(radios[i].checked==true)
        {
            selectPic[i].src = "img/select.png";
//            console.log("true");
//            selectPic[i+1].src = "img/select_no.png";
//            alert("asd");
//            break;
        }
        else{
            selectPic[i].src = "img/select_no.png";
        }
    }
}

一开始我把点击事件放在label里面，结果出现错误：连续点击支付宝会出现下面的情况：

就是说一开始点击时单选框会选上，但是函数执行是两个都没选上，再点击时才出现正常情况。

分析：因为点击事件放在label，单选框选上之后是执行函数先，然后再选上单选框，所以一开始会出现两个false。

修改：把点击事件放在input里面，这样label也可以绑定到