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