jqueryで要素が空の場合、背景色を変更します

Question

2つのテキストボックスと1つの選択ファイルと1つのファイルがあります。

jqueryを使用して背景色を変更するにはどうすればよいですか？

すべてをforループでチェックしたいと思います。

<input type="text"> 
<input type="text"> 

<select> 
    <option></option> 
    <option>A</option> 
    <option>B</option> 
    <option>C</option> 
</select> 

<input type="file"> 

Answer 1

を私は名前の関数を作成し、inititalページのロードにその関数を呼び出して、その後に情報の入力についてそれぞれにもう一度関数を呼び出すと、それに近づい入力。私は関数をdirecltyからCSSに要素を追加することからクラスへの追加/削除（invalid）に変更したことに注意してください。 1つの要素のCSSに直接影響するよりも、クラスを切り替えるほうが常に優れています。また、初期状態を示すために入力値の1つにテスト値を追加しました。

$(document).ready(function(){ 
 
checkInput(); 
 
    }) 
 

 
$('input, select').on('input change',checkInput) 
 

 
function checkInput(){ 
 
$('input, select').each(function(){ 
 
     if($(this).val() == ''){ 
 
     $(this).addClass('invalid')}else{ 
 
     $(this).removeClass('invalid')} 
 
    }) 
 
}

.invalid{background:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" value="test"> 
 
<input type="text"> 
 

 
<select> 
 
    <option></option> 
 
    <option>A</option> 
 
    <option>B</option> 
 
    <option>C</option> 
 
</select> 
 

 
<input type="file">

Answer 2

これは役立つはず：https://jsfiddle.net/4v8urh7k/1/

// check if the element is empty or not 
function checkEmpty(elem){ 
    if(elem.val() === ''){ 
    elem.addClass('empty'); 
    } else { 
    elem.removeClass('empty'); 
    } 
} 

// listen for when the input/select change 
$('input, select').on('change keyup',function(){ 
    checkEmpty($(this)); 
}); 

// loop through the elements when the page loads 
$('input, select').each(function(){ 
    checkEmpty($(this)); 
});