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

我很荣幸能够通过自定义设计单选按钮取消选中单选按钮。如何在第二次点击时取消选中自定义单选按钮？

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

附：：如果我的输入字段是可见的，如果我测试它，它正在工作，但如果我调整它的定制设计它不起作用。

来源

2017-07-31 Filip Petrovic

单选按钮没有被设计来获得选中。你可能想要使用复选框 –

你可以参考这里： https://stackoverflow.com/questions/19895073/radio-button-uncheck-on-second-click 干杯！ – DivyaMaheswaran

@JeremyThille我知道他们不是，但我很荣幸让用户能够取消单选按钮。 –

你可以用这个例子： 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'); 
    } 
});

取消选中它的作品呢！

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

来源

2017-07-31 16:05:02

有问题发生，如果我有多个单选按钮。如果我检查，然后取消选中一个单选按钮，然后检查并取消选中，我不能先检查。 –

@FilipPetrovic我更新了我的答案。我们所要做的就是在将其添加到另一个无线电之前，从具有相同名称的单选按钮中删除冲突的“已检查”属性。 –

使用下面的代码。

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/

来源

2017-07-31 15:56:26

我有的问题是无法取消选中单选按钮第二次点击。我的代码这样做。问题是因为跨度被点击，我不知道哪个输入字段取消选中。 –

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

来源

2017-07-31 16:21:24

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

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

回答

相关问题