jQuery更改空的必需輸入的背景顏色

Question

我有一個同時具有必填字段和非必填字段的表單，我想只更改用戶提交表單時為空的必填輸入的背景色。

必填字段具有一個名為“ required”的類

$('#audit_submit').click(function(){
   if($('.required').val() == '') 
    {
           $('.required').css('background-color' , '#FF0000');
        }
});

所有這些操作是，如果所有字段都為空，則會更改所有字段，如果不是，則不會更改任何字段。

Answer 1

您可以在此處使用.each（）遍歷所有.required元素：

$('#audit_submit').click(function(){
    $('.required').each(function() {
        if($(this).val() == '') {
           $(this).css('background-color' , '#FF0000');
        }
    });
});

Answer 2

小提琴演示

.filter（）所有值為''的元素，然后是appy .css('background-color', '#FF0000'); 過濾的元素。

要重置顏色，請使用.css('background-color', '#fff')

$('#audit_submit').click(function () {
    $('.required').css('background-color', '#fff').filter(function () {
        return $.trim(this.value) === '';
    }).css('background-color', '#FF0000');
});

Answer 3

工作小提琴http://jsfiddle.net/sV8QG/

$('p').click(function(){
   if($('.required').val() == '') 
    {
           $('.required').css('background-color' , '#FF0000');
        }
    else{
           $('.required').css('background-color' , 'white');
    }
});