複数のテキストとラジオボタンの入力状態をJqueryで取得

入力が行われていないテキストやラジオボタンについて、該当するdt要素をcssで変更する
仕組みを作っています。
「type="text" name="name1"」と「type="radio" name="r1"」は
実装できましたが、実際は項目が多いのでeach等で複数のinputタグに適用させたいです。

シンプルなJquery実装のために、htmlは変更していただいてかまいません。

コード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
6  <link rel="stylesheet" href="/static/index.css">
7  <title>flask</title>
8  <style>
9    .red {color: red; }
10  </style>
11</head>
12<body>
13<form action="regist" method="post">
14
15<dl>
16  <dt>Q1 aaa</dt>
17  <dd>name1<input type="text" name="name1"></dd>
18  <dt>Q2 aaa</dt>
19  <dd>name2<input type="text" name="name2"></dd>
20  <dt>Q3 aaa</dt>
21  <dd>
22    <label><input type="radio" name="r1" value="radio1">radio1</label>
23    <label><input type="radio" name="r1" value="radio2">radio2</label>
24    <label><input type="radio" name="r1" value="radio3">radio3</label>
25  </dd>
26  <dt>Q4 aaa</dt>
27  <dd>
28    <label><input type="radio" name="r2" value="radio4">radio4</label>
29    <label><input type="radio" name="r2" value="radio5">radio5</label>
30    <label><input type="radio" name="r2" value="radio6">radio6</label>
31  </dd>
32  <dt>Q5 aaa</dt>
33  <dd>
34    <label><input type="radio" name="r3" value="radio7">radio7</label>
35    <label><input type="radio" name="r3" value="radio8">radio8</label>
36    <label><input type="radio" name="r3" value="radio9">radio9</label>
37  </dd>
38</dl>
39<input type="submit" name="btn_confirm" value="入力内容を確認する">
40</form>
41
42</body>
43</html>

コード

javascript
1/*テキストの値が空集合*/
2if ($('input[name="name1"]').val() == ""){
3  $("dl dt:nth-of-type(1)").addClass("red");
4}
5/*テキストの値が入力されたら*/
6$('input[name="name1"]').blur(function(){
7  if ($(this).val() != "" ){
8    $("dl dt:nth-of-type(1)").removeClass("red");
9  }else{
10    $("dl dt:nth-of-type(1)").addClass("red");
11  }
12});
13/*ラジオボタンが選択されていない*/
14if ($('input[name="r1"]').value == null){
15  $("dl dt:nth-of-type(3)").addClass("red");
16}
17/*ラジオボタンが選択されたら*/
18$('input[name="r1"]').change(function(){
19    $("dl dt:nth-of-type(3)").removeClass("red");
20});
21

行動規範の内容に同意します

回答1件

ベストアンサー

調整の余地がありそうですが、とりあえず

javascript
1<script>
2$(function(){
3  $('#f1 input').on('change',function(){
4    $('#f1 :text').each(function(){
5      var flg=$(this).val()=="";
6      $(this).closest('dd').prev('dt').toggleClass('red',flg);
7    });
8    $('#f1 :radio').each(function(){
9      var flg=$('#f1').find('[name="'+$(this).attr('name')+'"]:checked').length==0;
10      $(this).closest('dd').prev('dt').toggleClass('red',flg);
11    });
12  }).eq(0).trigger('change');
13});
14</script>
15<style>
16.red{color:red}
17</style>
18<form action="regist" method="post" id="f1">
19<dl>
20  <dt>Q1 aaa</dt>
21  <dd>name1<input type="text" name="name1"></dd>
22  <dt>Q2 aaa</dt>
23  <dd>name2<input type="text" name="name2"></dd>
24  <dt>Q3 aaa</dt>
25  <dd>
26    <label><input type="radio" name="r1" value="radio1">radio1</label>
27    <label><input type="radio" name="r1" value="radio2">radio2</label>
28    <label><input type="radio" name="r1" value="radio3">radio3</label>
29  </dd>
30  <dt>Q4 aaa</dt>
31  <dd>
32    <label><input type="radio" name="r2" value="radio4">radio4</label>
33    <label><input type="radio" name="r2" value="radio5">radio5</label>
34    <label><input type="radio" name="r2" value="radio6">radio6</label>
35  </dd>
36  <dt>Q5 aaa</dt>
37  <dd>
38    <label><input type="radio" name="r3" value="radio7">radio7</label>
39    <label><input type="radio" name="r3" value="radio8">radio8</label>
40    <label><input type="radio" name="r3" value="radio9">radio9</label>
41  </dd>
42</dl>
43<input type="submit" name="btn_confirm" value="入力内容を確認する">
44</form>