ある要素のテキストと一致するvalueのチェックボックスを選択状態にするには

Question

参照元テキストと一致するvalue値を持つチェックボックスを予め選択した状態にさせることは可能でしょうか？
例えば、下記の例ではクラスcolorの中のテキストが「red blue 」なので
下のチェックボックスのvalue「red 」と「blue 」のチェックを選択した状態にさせたいです。
クラスcolorのテキストは必ず最後にスペースがついています。

<!-- 参照元テキスト -->
<span class="color">red blue </span>

<!-- チェックボックス -->
<ul id="chk">
<li><input type="checkbox" class="clr" name="iro" value="red " />red</li>
<li><input type="checkbox" class="clr" name="iro" value="blue " />blue</li>
<li><input type="checkbox" class="clr" name="iro" value="green " />green</li>
</ul>

ご教授お願いいたします。

Comments

[m.ts10806]

調べてみたこと、やってみたこと（そのソースコード）を質問に追記してください。現状、「やってみたこと」も何も提示されていないので丸投げの状態となっています。

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[m.ts10806]

ちなみにご質問では「可能かどうか」だけを求めていますか？ https://teratail.com/help/question-tips#questionTips1

[cp_cop]

mts10806さん　ご指摘ありがとうございます。任意のテキストを判断してチェックボックスを選択させる方法について調べたのですがネットにはこれらの情報が全くなくどうしたらよいのかわからない状態でいます。ご指摘の通りなのですが、ヒントになるような情報も知識もなく、そこで質問させていただいた次第です。

[cp_cop]

kei344さん　ご指摘ありがとうございます。恥ずかしながらこの質問につきましては何をどうすればいいのか全くわからない状態でいます。参考になる情報がないかネットで調べてはいたのですが、全く同じような動作をする情報がありませんでしたので質問させていただきました。

[cp_cop]

mts10806さん　「可能かどうか」だけではなく、実際に動作するコードを習得することを目的としています。

[m.ts10806]

ではそのように書いてください。「可能でしょうか？」だけでは求めていることが明確になっていません。ご自身ができていることできてないことも不明確なので「丸投げ」としか捉えられません。

[m.ts10806]

今のままだと「習得ではなく取得では？」という認識です。

[cp_cop]

mts10806さん　質問の仕方が誤解を招いてしまうような内容で申し訳ありませんでした。今後はご指摘いただいたように何を求め、今どこまでわかっているのかを明確に記載します。今回は何をどのようにしたらよいのか全くわからず、ヒントになるようなこともわかりませんでしたのでこのような質問内容になってしまいましたことをお許し下さい。

[m.ts10806]

ひとまず指摘内容を質問に反映されては？質問は質問者さん自身が修正できます。

Answer 1

たとえばこう

$(function(){
  $('.color').text().match(/[^\x20]+?\x20/g).forEach(function(x){
    $('.clr[value="'+x+'"]').prop('checked',true);
  });
});

追記

やっていることはほぼ同じですがfilterで処理すると

$(function(){
  $('.clr').filter(function(){
    return $.inArray($(this).val(),$('.color').text().match(/[^\x20]+?\x20/g))>=0;
  }).prop('checked',true);
});

Comments

[cp_cop]

ご回答いただきありがとうございます。
動作確認をしたところ希望通りの動きをしてくれました。

1点、ソースでわからないところがあるのですが
＞$('.clr[value="'+x+'"]').prop('checked',true);
この '+x+' は何を意味しているのでしょうか？
もしよろしければ教えていただければありがたいです。

[yambejp]

$('.color').text().match(/[^\x20]+?\x20/g)

で得られる値が["red ","blue "]という配列で
それをforEachで1つずつとりだしてxという変数に渡してループします

したがって
$('.clr[value="red "]')と$('.clr[value="blue "]')に対して
checkedプロパティをtrueにしています

[cp_cop]

ありがとうございます。
すいません、私の質問の仕方がわかりにくかったようで申し訳ありません。

＞$('.color').text().match(/[^\x20]+?\x20/g)
＞で得られる値が["red ","blue "]という配列で
＞それをforEachで1つずつとりだしてxという変数に渡してループします
この部分の動作は理解することができました。

そして、.prop('checked',true);でcheckedプロパティをtrueにすることも理解できたのですが、
[value="'+x+'"] が何を意味しているのかわかりません。

この、[value="'+x+'"]の '+x+' は何を意味しているのか教えて頂けませんでしょうか？

[yambejp]

前回かいたとおり
$('.clr[value="red "]')と$('.clr[value="blue "]')を意味しています
コールバックにわたすxが"red "と"blue "ですから

もっと単純にいえば
'.clr[value="'+x+'"]'
↓↓↓
「.clr[value="」と「x」と「"]」を文字列として結合してるということです

[cp_cop]

たびたびご回答いただき申し訳ありませんでした。
私の知識不足でトンチンカンな再質問をしてしまいすいません。
ご説明いただいたことで理解することができました。
＞「.clr[value="」と「x」と「"]」を文字列として結合してるということです
恥ずかしながら、わかりませんでした。

また、filterでの構文まで示していただきありがとうございます。
とても参考になります。
これを機にfilter構文についても学習してみます。

いろいろと教えていただきありがとうございました。
とても参考になりました。