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');
    }
});