使用複選框模擬單選按鈕，只觸發一次更改事件？

我想使用複選框來模擬單選按鈕的行爲，這表示：使用複選框模擬單選按鈕，只觸發一次更改事件？

當複選框被選中，所有其他複選框具有相同的名稱（這裏選擇器）都選中

但是，如果我嘗試做類似的事情：

$('body').delegate('.myradio', 'click', function(e) { 
    $('.myradio').prop('checked', false); 
    $(this).prop('checked', true); 
});

這會觸發change事件兩次。

如果我嘗試添加e.preventDefault：

$('body').delegate('.myradio', 'click', function(e) { 
    $('.myradio').prop('checked', false); 
    $(this).prop('checked', true); 
    e.preventDefault(); 
});

任何事件都被觸發，該複選框未選中。

最後，如果我嘗試觸發事件自己：

$('body').delegate('.myradio', 'click', function(e) { 
    $('.myradio').prop('checked', false); 
    $(this).prop('checked', true); 
    e.preventDefault(); 
    $(this).change(); 
});

的change事件也被稱爲兩次。

有關信息，我所有的複選框都有唯一的ID。

什麼是合適的方式來禁用除選中的複選框外的所有複選框？

來源

2013-01-15 Alain Tiemblo

這可能是一個很明顯的問題在這裏，但如果你想有一個複選框，像一個單選按鈕，爲什麼不直接使用一個單選按鈕？ –

因爲該行爲取決於其他地方檢查的內容：在某些情況下，用戶可能能夠檢查多個複選框。 –

您可以使用超時並忽略觸發的事件，例如兩次在100毫秒，但這將是非常骯髒的;） – 23tux

如果我正確理解你的問題，以下應該工作。

$('body').delegate('.myradio', 'click', function (e) { 
    var $element = $(this)[0]; 
    $('.myradio').each(function() { 
     if ($(this)[0] !== $element) 
      $(this).prop('checked', false); 
    }); 
});

這樣複選框組的行爲就像一個單選按鈕組。除了您可以取消選擇一個選定的項目。

下面的代碼使組行爲更像一個無線電組。一旦你做出選擇，你就不能取消選擇。

$('body').delegate('.myradio', 'click', function (e) { 
    var $element = $(this)[0]; 

    if ($(this).prop('checked') == false) { 
     $(this).prop('checked', true); 
     return; 
    } 

    $('.myradio').each(function() { 
     if ($(this)[0] !== $element) 
      $(this).prop('checked', false); 
    }); 
});

來源

2013-01-15 14:40:32

是的，解決問題沒有複雜性。 –

你能做到這樣，如果你仍然希望能夠取消選擇複選框

$('input[type=checkbox]').change(function(){ // <-- use the change event 
    var group = $(this).attr('name'); // get the group 
    $('input[name='+group+']').not(this).prop('checked',false); // set others to unchecked 
});

http://jsfiddle.net/rmJpB/

來源

2013-01-15 14:49:36

您可以在（）函數中使用。

$('body').on('click', '.myradio', function(){ 
    $('.myradio[name="'+$(this).attr('name')+'"]').prop('checked', false); 
    $(this).prop('checked', true); 
});

取消勾選所有其他具有相同名稱的複選框，勾選當前複選框。

http://jsbin.com/ofibow/2/edit

來源

2013-01-15 14:55:34

使用複選框模擬單選按鈕，只觸發一次更改事件？

回答

相關問題