Question

的jsfiddle

信息

我有3个选择。只需单击标签，而不是单选按钮。
点击不同的标签时，会检查不同的单选按钮。
在控制台中，只要点击一个标签就会显示“点击”，以确保发生这种情况。
当两次点击相同的标签时，控制台会说“已检查”，告诉我们它已经检查过了。
如果已经选中了标签，它应该从所有单选按钮中删除已选中的按钮，重置它，就像从一开始就重置。

问题

第二次单击单选按钮时，单击不会从所有单选按钮中删除选中的单选按钮。这是为什么？溶液

HTML

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

但您可能还想将该行为应用于点击单选按钮本身？

jQuery - 点击时重置单选按钮

1 个答案: