jQuery .prop添加/刪除單選按鈕上的類 - 不工作

我需要在一系列單選按鈕和複選框上添加/刪除泛型類（類似.is-checked）。下面是我的代碼：jQuery .prop添加/刪除單選按鈕上的類 - 不工作

$(function() { 
    $('input[type="checkbox"], input[type="radio"]').each(function() { 
    $(this).on('click', function() { 
     $(this).parent().wrap('<div>').unwrap(); 
     // works great for checkboxes, but not for radios 
     if ($(this).prop('checked')) { 
      $(this).addClass('is-checked'); 
     } else { 
      $(this).removeClass('is-checked'); 
     } 
    }) 
    }) 
})

這工作完全在複選框，但對被添加到單選按鈕類永遠不會被刪除。思考？想法？

編輯我不小心忘了提及，這個腳本會因爲被有條件地加載IE8「：選中」不支持僞選擇。整個功能在除IE8以外的任何地方都可以很好地工作，所以這對瀏覽器來說是一個柺杖，而窮人用戶則處理它。最後，'is-checked'類會觸發與checked選擇器相同的CSS。

來源

2013-07-29 cmegown

爲什麼ü使用'$（本）。在（ '點擊'，函數（）{'在'each'？u能詳細點嗎？ – krishgopinath

你的代碼似乎爲我工作。這兩個點擊事件都在觸發，並設置了is-checked類。http://jsfiddle.net/xzNPh/ –

@WillemEllis可能是jQuery版本的區別（認爲它是1.6改變了'attr'的行爲並且'prop'） – sgroves

我現在看到你以後。問題是這條線：

$(this).removeClass('is-checked');

它只是從被點擊的元素中刪除.is-checked。這適用於複選框，但由於無線電的工作方式不同，這不起作用。爲了解決這個問題，做這樣的事情：

$(function() { 
    $('input[type="checkbox"], input[type="radio"]').on('click', function() { 
     $(this).parent().wrap('<div>').unwrap(); 
     $('input[type="checkbox"], input[type="radio"]').each(function() { 
      $(this).is(':checked') ? $(this).addClass('is-checked') : $(this).removeClass('is-checked'); 
     }); 
    }); 
});

http://jsfiddle.net/xzNPh/4/

來源

2013-07-29 18:07:53

完全按照預期工作，謝謝先生！ – cmegown

嘗試使用原生屬性：

$('input[type="checkbox"], input[type="radio"]').on('click', function() { 
     $(this).parent().wrap('<div>').unwrap(); 
     if (this.checked) { 
      $(this).addClass('is-checked'); 
     } else { 
      $(this).removeClass('is-checked'); 
     }  
});

來源

2013-07-29 18:00:51 YD1m

如何：

var inputs = $('input[type="checkbox"], input[type="radio"]'); 
inputs.on('click', function() { 
    $(this).parent().wrap('<div>').unwrap(); 
    inputs.removeClass('is-checked'); 
    $(this).toggleClass('is-checked', $(this).prop('checked', true)); 
});

你還沒有解釋什麼是它，所以我不會冒險，如果你猜甚至需要這些代碼。例如。如果它只是造型，那麼也許CSS會在這裏做得很好。

而一個fiddle

來源

2013-07-29 18:14:43 guessimtoolate

jQuery .prop添加/刪除單選按鈕上的類 - 不工作

回答

相關問題