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

Fiddle Demo

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

jquery更改空所需输入的背景颜色

3 个答案: