JQ处理单选框radio（获取值改变值修改样式）

1、JQ获取radio的值
//HTML

    <label class="test-label">
             <input class="test-radio" id="oneyear" type="radio" name="radio" value="1">
             <span class="test-radioInput"></span>
              <span style="color:#888;font-size:20px;">1年</span>
      </lable>

    <label class="test-label">
             <input class="test-radio" id="twoyear" type="radio" name="radio" value="2">
             <span class="test-radioInput"></span>
              <span style="color:#888;font-size:20px;">2年</span>
      </lable>

//JQ

var year = $("input[name='radio']:checked").val(); //客户选的年数

2、JQ获取radio的选中状态

var flag=$("input[name='radio']").is(":checked")

3、JQ改变radio的选中状态

    $("input[name='radio']").attr("checked", false);
    $("input[name='radio']").attr("checked", true);

4、CSS修改radio的默认样式,参考：https://www.jianshu.com/p/0307febc0d85

.test-label {
    display: inline-block;
}

.test-radio {
    display: none
}

.test-radioInput {
    background-color: #fff;
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-right: 10px;
    margin-top: -1px;
    vertical-align: middle;
    border-radius: 3px;
    line-height: 1;
    border: 1px solid #0F7BF0;

}

.test-radio:checked+.test-radioInput:after {
    background-image: url(../images/true.png);
    background-repeat: no-repeat;
    background-position: 50% 45%;
    background-size:19px 15px;
    content: "";
    display: inline-block;
    height: 22px;
    width: 22px
}