質問編集履歴

1 リンクがうまく貼れていなかったため、修正。

annko

annko score 18

2019/02/02 13:25  投稿

js(jQuery)で、二組の値をチェックして、重複を抜き出したい【コード有り】
お世話になります。
現在、javascript学習中のエンジニアです。
タイトルのつけ方がかなり難しかったのですが、下記のような動きをするコードを書きたいです。
実装の方法がイメージできず、有識者の方々にお聞きしたいです<(_ _)>
### やりたいこと
確認ボタンが押された際にチェック処理が発火し、
同姓同名の名前がフォームに入力されていたら、
重複する「姓」「名」の行を赤字にする。
### 〇 完成のイメージ
![イメージ説明](d8191ab0a8e17fbe34245a8aa6c217ca.png)
### × 現状のイメージ
![イメージ説明](3deb1b0458e29e8c5c51700ce349efd6.png)
### できなかったこと
同姓同名の行"だけ"を赤字にするのがとてもむずかしいです...。
下記のソースコードをみていただくとわかるのですが、
input[text]タグを取得し、総当たりでチェックすることで、
「重複があれば全てのフォームを赤字」にすることはできました。
「× 現状のイメージ」の例でいうと、
同姓同名は「佐藤太郎」だけですので、一行目と三行目を赤くしたいのですが、
二行目の「佐藤」も赤くなってしまいます...。
これをなんとか改善したいのですが、正直、どうすれよいのかさっぱりです。。
### ソースコード
 
https://jsfiddle.net/Lwajozn9/8/
[→ ここから飛べます](https://jsfiddle.net/Lwajozn9/8/)  
 
↑ このURLのページに飛ぶと、下記の画像のように、実際に動かしたり修正したりできます。
![イメージ説明](7ee2fdfd1c3623cfd7645b982b93f3ec.png)
### ソースコード原文
```
<!DOCTYPE html>
<html>
<head>
</head>
<body>
   <form>
       <div id="row1">
           姓 : <input type="text" value="佐藤">
           名 : <input type="text" value="太郎">
           削除 : <input type="checkbox">
       </div>
       <div id="row2">
           姓 : <input type="text" value="佐藤">
           名 : <input type="text" value="花子">
           削除 : <input type="checkbox">
       </div>
       <div id="row3">
           姓 : <input type="text" value="佐藤">
           名 : <input type="text" value="太郎">
           削除 : <input type="checkbox">
       </div>
       <div id="row4">
           姓 : <input type="text" value="安藤">
           名 : <input type="text" value="良子">
           削除 : <input type="checkbox">
       </div>
       <button type="submit">確認</button>
   </form>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
$('form').submit(function() {   
   $('input[type=text]').each(function(i) {
       var str = $(this).val();
       var chk = 0;
       $('input[type=text]').each(function(j) {
           var str2 = $(this).val();
           if ((str2 == str) && (i != j)) {
           chk = 1;
       }
       });
       if(chk != 0) {   
           $(this).css("color", "#F00");
       }
   });
   return false;
});
</script>
</body>
</html>
```
以上、どうかご教授を何卒よろしくお願いいたします。
  • JavaScript

    37851 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    13403 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る