配列と比較してチェックボックスにチェックを入れる方法

Question

一方のリストと一致する名前を、もう一方のリストでチェックしたいのですが、jQueryの書き方についてご指導頂けませんでしょうか。

具体的には、次のHTMLの<h4>現在の名前</h4>に「一郎と三郎」があるので、<h4>チェックする名前</h4>の「一郎と三郎」にチェックする。というイメージです。

<h4>現在の名前</h4>
<ul class="current_names">
  <li>一郎</li>
  <li>三郎</li>
</ul>

<h4>チェックする名前</h4>
<ul class="checkbox_names">
  <li><label><input type="checkbox" name="name">一郎</label></li>
  <li><label><input type="checkbox" name="name">二郎</label></li>
  <li><label><input type="checkbox" name="name">三郎</label></li>
  <li><label><input type="checkbox" name="name">四郎</label></li>
  <li><label><input type="checkbox" name="name">五郎</label></li>
</ul>

問題のjQueryがこちらになります。

$(function(){

  // STEP➀配列を作る
  var current_names = [];

  // STEP➁配列に現在の名前を入れる
  $( '.current_names li' ).each( function () {
    var current_name = $( this ).text();
    current_names.push( current_name );
  });	

  // STEP➂現在の名前と一致するものにチェックを入れる
  $( '.checkbox_names input' ).each( function () {
    $( this ).match( current_names ).prop( 'checked', true );	
  });	
  
});

どうやら上のjQueryはSTEP➂がおかしいようなので、その書き方について教えて頂ければと思います。
宜しくお願い致します。

Answer 1

こんにちは

STEP➂を、以下のように修正してみるといかがでしょうか？

  // STEP➂現在の名前と一致するものにチェックを入れる
  $( '.checkbox_names input' ).each( function () {
    var text = $(this).parent().text();
    $( this ).prop( 'checked', current_names.includes(text));    
  });

**上記の動作確認用サンプル： **https://jsfiddle.net/jun68ykt/yko7vbn9/5/

追記

別案を考えてみました。以下です。

$(function(){
  
  $('.checkbox_names input').each(function () {
    var name = $(this).parent().text();
    var count = $(`.current_names li:contains(${name})`).length;
    $(this).prop('checked', count > 0);    
  });    

});

**上記の動作確認用サンプル： ** https://jsfiddle.net/jun68ykt/obda476u/1/

Comments

[ka2ga2]

こんにちは！できました。いつもありがとうございます。

[jun68ykt]

解決したようで、よかったです????
別案を考えたので、参考までに回答に追記しました。

[ka2ga2]

別案まで！どうもありがとうございます。中かっこ{}をたまに見ますが、これは一体何なのでしょうか？

[jun68ykt]

function() { } の中カッコのことでしょうか？ これは関数の本体を囲むために使う記号です。
以下に文法が記載されています。

関数式 (function 演算子)
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions_and_function_scope#The_function_expression_.28function_operator.29

[ka2ga2]

ああ！！失礼致しました。{name}の方です。申し訳ございません。

[jun68ykt]

`:contains(${name})`　のほうですね。まず `・・・` はテンプレート文字列と呼ばれるものです。

テンプレート文字列
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/template_strings

テンプレート文字列の中で変数を使うとき、 ${ } で囲みます。
たとえば

var name = "一郎";

var str = `名前：${name}`;

とすると、 str には "名前：一郎" という文字列が入ります。

var x = 100;

var str2 = `x+1：${x+1}`;

とすると str2 には、 "x+1：101"　という文字列が入ります。

[ka2ga2]

var str = `名前：${name}`;
は

var str = `名前："+name+"`;
とは何が違うのでしょうか？

[jun68ykt]

var str = `名前："+name+"`;

だと、 str には

「名前："+name+"」

という文字列が入ってしまいますね。

var name = "一郎";

のときに、「名前：一郎」 という文字列を得るには

"名前：" + name

としても得られますが、テンプレート文字列を使えば、`名前：${name}`　と、 + を使って結合しなくてよいという利点があります。

[ka2ga2]

なるほど。わかったような気がします。後づけの蛇足な質問にお答え頂き心より感謝致します。どうもありがとうございました。