如何在第二次单击时取消选中自定义单选按钮？

Question

我赢得了能够在第二次单击时使用自定义设计单选按钮取消选中单选按钮。

这是HTML代码：

<input type="radio" id="sortForm11" name="sortForm11" value="descPrice"/>
<label for="sortForm11">Text<span ></span></label>

这是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;
}

这是js代码：

$('input[name=sortForm11]').on('click',function () {
   var $radio = $(this);

         // if this was previously checked
         if ($radio.data('waschecked') == true)
         {
           console.log('cao');
             $radio.prop('checked', false);
             $radio.data('waschecked', false);
         }
         else
             $radio.data('waschecked', true);

         // remove was checked from other radios
         $radio.siblings('input[name=sortForm11]').data('waschecked', false);
 });

PS：如果我的输入字段是可见的，如果我测试它是有效的，但如果我调整它以进行自定义设计它不起作用。

Answer 1

你可以使用这个例子： https ： //jsfiddle.net/k0sp350f/5/

$('input[name=sortForm11] + label span').on('click', function (e) {
     var $radio = $(this).parent().prev();

     // if this was previously checked
     if ($radio.is(':checked')) {
         $radio.removeAttr('checked');
     } else {
         $('input[name=' + $radio.attr('name') + ']').removeAttr('checked');
         $radio.attr('checked', 'checked');
     }
});

取消选中它也有效！

更新：对于具有相同名称的多个单选按钮

Answer 2

    <input type="radio" id="sortForm11" name="sortForm11" value="descPrice"/>
    <label for="sortForm11">Text<span ></span></label>
    <br>
    <input type="radio" id="sortForm11" name="sortForm12" value="descPrice"/>
    <label for="sortForm12">Text2<span ></span></label>
var val = 0;
var val2 = 0;
$('input[name=sortForm11]').on("click", function(){
    console.log(val);
    if($(this).val()==val) 
    {$(this).prop('checked', false);
    val = -1;
    }
    else val = $(this).val();
});
var val2 = 0;
$('input[name=sortForm12]').on("click", function(){
    console.log(val2);
    if($(this).val()==val2) 
    {$(this).prop('checked', false);
    val2 = -1;
    }
    else val2 = $(this).val();
});

Answer 3

使用以下代码。

var val = 0;
$('input[name=sortForm11]').on("click", function(){
    console.log(val);
    if($(this).val()==val) 
    {$(this).prop('checked', false);
    val = -1;
    }
    else val = $(this).val();
});

这是一个例子： http ： //jsfiddle.net/wuAWn/534/