Question

我创建了一个函数，使我的复选框成为单选按钮，并且可以取消选中它们。我遇到的问题是，当第二次点击相同的框时，速度更快（不是快速双击）它不会做任何事情，就像它没有捕捉到事件一样。

它们以两倍的形式出现，它们共享名称。

checkbox name 1
checkbox2 name 1

checkbox3 name 2
checkbox4 name 2 ....

这是我的功能，除了那个小故障外，它运作良好。

$('#MyDiv').find('input[type="checkbox"]').click(function() {
    if (!$(this).is(':checked')) {
        $(this).prop('checked', false);
        return;
    }
    $('#MyDiv').find('input[type="checkbox"][name=' + $(this).attr('name') + ']').each(function() {
        $(this).prop('checked', false);
    });
    $(this).prop('checked', true);
});

Html示例：

<div id="MyDiv">
    <div>
        <p>
            <input id="MyDivUsage_Yes" type="checkbox" name="MyDivUsage"  />
            <label for="MyDivUsage_Yes">Yes</label>
            <input id="MyDivUsage_No" type="checkbox" name="MyDivUsage" />
            <label for="MyDivUsage_No">No</label>
        </p>

    </div>
</div>

出于某种原因，它不会对jsfiddle起作用。

Answer 1

我猜它至少可以更有效率：

$('#MyDiv').find('input[type="checkbox"]').on('click', function() {
    $('input[type="checkbox"][name="'+$(this).attr('name')+'"]').not(this).prop('checked', false);
});

FIDDLE

或更多原生JS：

$('input[type="checkbox"]', '#MyDiv').on('click', function() {
    var boxes = document.getElementsByName(this.name);
    for (var i=0; i<boxes.length; i++) {
        if (boxes[i] != this) boxes[i].checked = false;
    }
});

FIDDLE

Answer 2

试试这个：

var checked = {};
    $('.desectable-radio').each(function (index) {
        checked[index] = this.checked;
        $(this).click(function () {
            if (checked[index])
                this.checked = false;
            for (var i in checked) {
                checked[i] = false;
            }
            checked[index] = this.checked;
        });
    });

小提琴：http://jsfiddle.net/dFDeX/1/

复选框设置为单选按钮第二次单击故障

2 个答案: