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);
 });

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

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/

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

3 个答案: