javascript - 具有 html 属性的不可选中的单选按钮 'checked'

Question

我正在使用 #javascript 中一位友好小伙子提供的这个简单脚本来取消选中单选按钮:

 $('.feed').on('click', 'input[type=radio]', function() {
    var myParent = $(this).closest('div');
  var ref = $(this);
  if( myParent.data('val') == $(this).val() ){
    var ref = myParent.find('.none input');
    ref.prop('checked',true);
  }
    myParent.data('val',ref.val() )
 });

一切正常，请参阅此 fiddle ，但是当我将属性“checked”添加到一个单选按钮时，您实际上必须单击两次才能取消选中它，请参阅此 fiddle 。这让我思考，将“checked”设置为属性实际上等于手动检查单选按钮吗？或者为什么我会失败？

Answer 1

这与添加属性与单击无关，它是附加代码，特别是这一行:

if (myParent.data('val') == $(this).val() ){

这表示，如果您之前点击过此按钮，请将其关闭。

但是，您并没有告诉代码您已经(实际上)“单击”了它。

您可以通过将初始值添加到“myParent”来完成此操作，一种方法是将其添加到 html:

<div data-val='1'>

更新的 fiddle :https://jsfiddle.net/8jh2k8u8/4/

<小时/>

另一种方法是通过代码查找所选的 radio (:checked) 来初始化父级:

var startup = $(".feed input[type=radio]:checked").first();
if (startup.length) {
    startup.closest("div").data("val", startup.val())
}

更新的 fiddle :https://jsfiddle.net/8jh2k8u8/5/