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

【问题标题】：How to uncheck custom radio button on second click?如何在第二次单击时取消选中自定义单选按钮？
【发布时间】：2018-01-07 06:51:17
【问题描述】：

我不会在第二次点击时取消选中自定义设计单选按钮的单选按钮。

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

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

【问题讨论】：

单选按钮的设计目的不是为了不被选中。您可能想使用复选框
你可以参考这里：stackoverflow.com/questions/19895073/…干杯！
@JeremyThille 我知道他们不是，但我不会让用户能够取消选中单选按钮。
@DivyaMaheswaran 我看到帖子和代码是一样的，我的问题是取消自定义设计单选按钮。问题是因为点击了 span 而不是自己输入，所以我不知道要取消选中哪个输入字段。
Radio button uncheck on second click的可能重复

标签： javascript jquery html css

【解决方案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');
     }
});

取消选中它也可以！

更新：对于同名的多个单选按钮

【讨论】：

如果我有多个单选按钮，就会出现问题。如果我检查然后取消选中一个单选按钮，然后检查并取消选中第二个，我无法先检查。
@FilipPetrovic 我更新了我的答案。我们所要做的就是在将同名单选按钮添加到另一个单选按钮之前删除冲突的“已选中”属性。

【解决方案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();
});

【讨论】：

这是不好的做法，因为我需要为每个自定义单选按钮编写函数，想象一下如果我有 100 甚至 1000 个单选按钮。

【解决方案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/

【讨论】：

我遇到的问题是无法在第二次单击时取消选中单选按钮。我的代码就是这样做的。问题是因为点击了跨度，我不知道要取消选中哪个输入字段。