上<span>点击改变无线电选中或取消选中

Question

$('div').on('click', function (ev) { 
    if (ev.target.tagName === 'SPAN') { 
     if ($(ev.target).prev().is(':checked') === false) { 
      $(ev.target).prev().attr('checked', true) 
     } 
     else { 
      $(ev.target).prev().attr('checked', false) 
     } 
    } 
}); 

所以，当我从选中我的span元素上单击单选变为检查，然后当我再次单击它成为选中，因为它应该，但后来它打破，这就是它...这是我的问题。当我点击它多于2次，并不会将选中的值更改为任何内容。 这里是我的HTML

<div> 
    <input type="text" placeholder="Answer..."> 
    <input type="radio" name="1"> <span>Answer 1</span> 
    <input type="radio" name="1"> <span>Answer 2</span> 
    <input type="radio" name="1"> <span>Answer 3</span> 
    <input type="radio" name="1"> <span>Answer 4</span> 
</div> 

Answer 1

你想用.prop而不是.attr：

$('div').on('click', function(ev) { 
 
    if (ev.target.tagName === 'SPAN') { 
 
    if ($(ev.target).prev().is(':checked') === false) { 
 
     $(ev.target).prev().prop('checked', true) 
 
    } else { 
 
     $(ev.target).prev().prop('checked', false) 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <input type="text" placeholder="Answer..."> 
 
    <input type="radio" name="1"> <span>Answer 1</span> 
 
    <input type="radio" name="1"> <span>Answer 2</span> 
 
    <input type="radio" name="1"> <span>Answer 3</span> 
 
    <input type="radio" name="1"> <span>Answer 4</span> 
 
</div>

看到How to check a radio button with jQuery ?

Answer 2

嗯，这里有一个简单的解决方案。不漂亮，但它能完成这项工作。只记得总是重置所有的输入，因为它是具有相同名称的无线电，你不能有更多的检查。

$('span').on('click', function (ev) { 
    if (ev.target.tagName === 'SPAN') { 
     if ($(ev.target).prev().is(':checked') === false) { 
      $('input[type="radio"]').attr('checked', false); 
      $(ev.target).prev().attr('checked', true); 
     } 
     else { 
      $(ev.target).prev().attr('checked', false); 
     } 
    } 
}); 

http://jsbin.com/wabecaboha/1/edit