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

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 中的自定义设计单选按钮？

How to uncheck a custom design radio button in Framework7?

html

javascript

css

html-framework-7

phonegap