Question

我有一个点击事件处理程序附加到一组无线电输入，并想看看我是否点击已经选中的单选按钮（已设置属性'已'）。我认为事件处理程序将以菊花链方式运行（首先在单击时调用我的事件处理程序，然后继续向下链接到单击的默认行为）。显然情况并非如此，因为当我在单击的单选按钮上评估属性'checked'是否为真时，它总是在我的单击事件处理程序中返回true。

点击已经由默认行为处理，并且已经将“已检查”属性应用于我刚刚点击的单选按钮。同样，我认为我的点击事件处理程序将在该默认行为之前被处理。更奇怪的是，即使我阻止默认行为，它仍然会为'checked'属性返回true。我假设这是因为'checked'事件正在处理'checked'属性，因此阻止click事件处理程序的默认行为不会影响任何事情。

$("input[type='radio']").click(function(e) {
  e.preventDefault();

  alert($(this).prop("checked")); // always returns true; i want prop value immediately prior to click
});

我怎样才能实现我追求的目标？也就是说，要查看刚刚点击的单选按钮是否已经检查过。感谢。

Answer 1

根据@Jeffman的回应，我能够为我需要做的事情找到一些工作。我有自定义按钮，只能选择其中一个（因此使用单选按钮）。但是，如果单击已选择的那个，则应取消选择并选择默认值。

我必须做的事情。处理无线电标签上的mousedown事件。如果我点击已选择的收音机，请将默认按钮设置为“已选中”。另外，我只选择已点击的按钮。我不得不在这些按钮上禁用“点击”事件，因为这会覆盖我对单选按钮的不规则处理（出于某种原因，选择会快速恢复到我覆盖它时单击的那个并手动选择默认按钮）。这也意味着我需要手动触发更改事件，因为我在那里进行自定义单选按钮样式。

$(".radios > label").mousedown(function(e) {

var l = $(this); // label
var t = l.parent(); // container for radio group
var i = l.find("input"); // input element of this label

if(i.prop("checked")) { // clicking on the already selected button
    t.find(".default_radio input").prop("checked", true).trigger("change");     
} else {
    i.prop("checked", true).trigger("change");
}
}).bind('click',false);

$("input[type='radio']").change(function(e) {

    // style the buttons here
});

Answer 2

通过mousedown点击之前保存无线电状态

var was_checked;  
  $( "#radio" ).mousedown(function() {       
     was_checked = $(this)[0].checked;             
  });

  $( "#radio" ).click(function() {               
        $(this).attr('checked', !was_checked);      
  });

Answer 3

我认为你也应该归还假。不仅防止默认

Answer 4

这是一个可以解决问题的示例代码

<script>
$(function() {
    var radios = {};

    $("input[type='radio']").each(function() {
        radios[$(this).uniqueId().attr('id')] = false;
    });
    function resetRadioState() {
        $("input[type='radio']").each(function() {
            radios[$(this).attr('id')] = $(this).is(':checked');
        });
    }
    resetRadioState();
    $("input[type='radio']").click(function(e) {
        alert(radios[$(this).attr('id')]);
        resetRadioState();
    });
})
</script>

<input type="radio" name="group[]"/>
<input type="radio" name="group[]" checked/>

阻止立即收音：点击事件检查属性

4 个答案: