如何取消选中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(); 
});