Question

我的自定义设计单选按钮有问题，我想让用户取消选中单选按钮。

这是html代码：

<input type="radio" id="tip11" name="tip1" value="Stan" />
<label for="tip11">Stan<span></span></label> <br><br>

这是css代码：

input[type="radio"] {
    display:none;
}
input[type="radio"] + label span {
    display:inline-block;
    width:  20px;
    height: 20px;
    margin: 0 10px 0 0;
    vertical-align:middle;
    background:url(../images/checkbox.png) left top no-repeat;
    background-size: 20px 20px;
    cursor:pointer;
    border-radius: 2px;
    float:right;
}
input[type="radio"]:checked + label span {
    background-color: #4bc2ff;
}

这是Framework7中的JS代码：

$$('#cc').click(function (e) {
    console.log('cao');
    $$('#sortForm11').prop('checked', false);
});

仅仅是为了测试目的，我想能够点击并在同一事件中能够检查和取消选中单选按钮，但是自定义设计单选按钮保持检查。

Answer 1

$$('input[name=sortForm11] + label span').on('click', function (e) {
         var $radio = $(this).parent().prev();
         // if this was previously checked
         if ($radio.is(':checked')) {
             $$('input[name=sortForm11]').removeAttr('checked');
             $radio.removeAttr('checked');
             //onsole.log('cao1');
         } else {
            $$('input[name=sortForm11]').removeAttr('checked');
             $radio.attr('checked', 'checked');
             //console.log('cao2');
         }
         e.preventDefault();
 });

如何在Framework7中取消选中自定义设计单选按钮？

1 个答案: