上<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