单击jQuery -重置单选按钮

Question

jsfiddle

http://jsfiddle.net/cCBUh/2/

信息

• 我有三个选择。只点击标签，而不是单选按钮。
• 当单击不同的标签时，会检查不同的单选按钮。
• 在控制台中，它写着“点击”当任何时候标签被点击，只是为了确保这种情况发生。
• 当两次点击同一个标签时，控制台上写着“已检查”，告诉我们已经检查过了。
• 如果标签已经被选中，它应该从所有的单选按钮中删除选中的按钮，重新设置它，就像从一开始就做的那样。

问题

当第二次单击单选按钮时，不要从所有单选按钮中移除选中的按钮。为什么会这样呢？解决办法？

<div class="panel">
    <label for="radio-1">Radio 1</label>
    <label for="radio-2">Radio 2</label>
    <label for="radio-3">Radio 3</label>
    <input type="radio" id="radio-1" name="group-1">
    <input type="radio" id="radio-2" name="group-1">
    <input type="radio" id="radio-3" name="group-1">
</div>

jQuery

jQuery(document).ready(function($) {
    $('.panel label').on( "click", function(e) {
        console.log('clicked');
        var my_id = $(this).attr('for');
        if( $('.panel #' + my_id).is(':checked') ) {
            console.log('checked');
            $('.panel input[type="radio"]').prop('checked', false);
        }
    });
});

Answer 1

我认为问题在于，带有id属性的标签上的默认单击行为强制这样做。我更改了您的javascript以执行您想做的事情，并添加了更多的调试：

http://jsfiddle.net/cCBUh/15/

jQuery(document).ready(function($) {
    $('.panel label').on( "click", function(e) {
        // prevent the html to automatically check the corresponding checkbox
        e.preventDefault();
        var my_id = $(this).attr('for');
        console.log('clicked: ' + my_id);
        if( $('#' + my_id).is(':checked') ) {
            console.log('checked: ' + my_id);
            $('#' + my_id).prop('checked', false);
        } else {
            console.log('check now: ' + my_id);
            $('#' + my_id).prop('checked', true);
        }
    });
});

但是，您也可能希望将这种行为应用到单选按钮本身的onClick上？