質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
checkbox

checkboxは、GUIのエレメントです。また、HTML<input>タグのtype属性で扱われる値を指します。

jQuery

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

Q&A

2回答

933閲覧

jQuery checkbox 複数のクラスの2以上チェックされたクラスの取得方法

yuu12345678

総合スコア12

checkbox

checkboxは、GUIのエレメントです。また、HTML<input>タグのtype属性で扱われる値を指します。

jQuery

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

0グッド

0クリップ

投稿2019/07/13 18:05

編集2022/01/12 10:55

はじめまして
jqueryの書き方で悩んでいてどなたかご教授いただけると助かります。

複数ランダムにのa・b・c・d・eクラスを持つチェックボックスをユーザーが選択したときに
2以上同じ英語のクラスにチェックが入ったときに
下にある非表示にしたボタンの同じ英語のボタンだけを表示させたい
1つのチェックの時は表示させたくないです

複数のクラスを持つチェックボックスの2以上チェックが入った場合
例えばclass="a b"とclass="b c"のにbtnBだけを表示させたいのですが
どのようにbだけを取得する方法がありますでしょうか・・?

複数のクラスを持つチェックボックス---------------

html

1<ul> 2 <li class="a b"> 3 <input type="checkbox" name="check" id="label1"> 4 <label for="label1"></label> 5 </li> 6 <li class="b c"> 7 <input type="checkbox" name="check" id="label1"> 8 <label for="label1"></label> 9 </li> 10 <li class="d e"> 11 <input type="checkbox" name="check" id="label1"> 12 <label for="label1"></label> 13 </li> 14</ul>

チェックボックスが2つチェックされたら表示させたい---------------

html

1<div class="btnA"></div> 2<div class="btnB"></div> 3<div class="btnC"></div> 4<div class="btnD"></div>

チェックされたクラスから2以上の同じクラス名のみ取得してbtnを表示したい---------------

jquery

1$(function() { 2 $('input[name="check"]').change(function() { 3 var form_class = $(this).parent().attr("class"); 4 }); 5 });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2019/07/13 18:10

(質問文は編集できます)質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。 また、どのような状況の時に、どのような表示処理を行いたいのかを、列挙することをお勧めします。
yuu12345678

2019/07/13 18:26

ご指摘ありがとうございます! 書き方がわかっていませんでしたので修正いたしました!
think49

2019/07/14 02:35

id="label1" の重複はHTMLの文法違反になります
kei344

2019/07/17 13:56

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。
guest

回答2

0

html

1<style> 2button { 3 display: none; 4} 5</style> 6<ul> 7 <li class="a b"> 8 <label for="label1"> 9 <input type="checkbox" name="check" id="label1"> 10 </label> 11 </li> 12 <li class="b c"> 13 <label for="label2"> 14 <input type="checkbox" name="check" id="label2"> 15 </label> 16 </li> 17 <li class="d e"> 18 <label for="label3"> 19 <input type="checkbox" name="check" id="label3"> 20 </label> 21 </li> 22</ul> 23<button class="a">btnA</button> 24<button class="b">btnB</button> 25<button class="c">btnC</button> 26<button class="d">btnD</button> 27<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 28<script> 29$(function() { 30 $('input[name="check"]').change(function() { 31 $('button').hide(); 32 if ($('input[name="check"]:checked').length >= 2) { 33 var _tmp = []; 34 $('input[name="check"]:checked').each(function() { 35 _tmp.push($(this).parents('li').attr('class').split(' ')); 36 }); 37 _tmp = Array.prototype.concat.apply([], _tmp); 38 var showClass = _tmp.filter(function (x, i, self) { 39 return self.indexOf(x) === i && i !== self.lastIndexOf(x); 40 }); 41 if (showClass.length) { 42 $('.' + showClass).show(); 43 } else { 44 $('button').hide(); 45 } 46 } 47 }); 48}); 49</script>

投稿2019/07/14 03:22

yasutomi

総合スコア2937

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yuu12345678

2019/07/14 21:24

ありがとうございます!! 上記使用させていただこうと思い調べながら触らせていただいたのですが 私には難しすぎてうまくいかず再度教えていただきたいのですが ・チェックボックスが3以上の場合 ・チェックが複数の場合はボタンも複数表示させたい とう風にしたいのですが可能でしょうか・・
yasutomi

2019/07/14 22:48

コードを複数クラスをshow()で表示できるよう 修正すれば可能です。
yuu12345678

2019/07/15 17:19

勉強不足は重々承知で何度も質問申し訳ありません。 配列で出現回数は取得できたのですが data.filter(function(value){ return ( value >= 3);} ); で出現回数が3以上のものをフィルターで抽出したいのですが 上手くできずエラーになってしまいどこがおかしいのか教えていただけないでしょうか・・ $(function() { $('input[name="check"]').change(function() { $('button').hide(); if ($('input[name="check"]:checked').length >= 3) { var _tmp = []; $('input[name="check"]:checked').each(function() { _tmp.push($(this).parents('li').attr('class').split(' ')); }); _tmp = Array.prototype.concat.apply([], _tmp); var data={}; for(var i=0;i<_tmp.length;i++){ var key=_tmp[i]; if(data[key]==undefined) data[key]=0; data[key]++; } var showClass = data.filter(function(value){ return ( value >= 3);} ); if (showClass) { $('.' + showClass).show(); } else { $('button').hide(); } }; }); });
guest

0

:checked + length

疑似クラス :checked で「チェックされた要素ノード」を得て、.length で数を得れば、お望みの動作になります。

classList

例えばclass="a b"とclass="b c"のにbtnBだけを表示させたいのですが

classList でクラストークンを疑似配列形式で参照できますので、for 文などの繰り返し処理で a, b, c の出現回数をカウントし、「出現回数 = 2」の b を抽出すれば良いと思います。

Re: yuu12345678 さん

投稿2019/07/14 02:41

編集2019/07/14 03:10
think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yuu12345678

2019/07/14 21:25

ありがとうございます!! .classListというものがあるのですね! 出現回数をカウントというのは調べてわかったのですが https://qiita.com/Slowh/items/928cdb8c885425401ebf 「出現回数 = 2」の b を抽出という方法がわからず 再度教えていただけるとたすかります
think49

2019/07/14 23:20

出現回数を変数に記録して、カウント処理終了後に2を参照した "b" を抽出して下さい。 例えば、{a:1,b:2,c:1} で格納すれば、繰り返し構文で列挙すれば、値が2となるkeyが "b" である事が分かります。 for文で配列の要素値カウント処理がサンプルコード頼りで、自分でコードを考案できないのは問題だと思います。 ごく簡単なループ処理ですので、今一度、基礎を学習しないと、自分でコードを書けないと思いますよ。
yuu12345678

2019/07/15 17:20

勉強不足は重々承知で何度も質問申し訳ありません。 配列で出現回数は取得できたのですが data.filter(function(value){ return ( value >= 3);} ); で出現回数が3以上のものをフィルターで抽出したいのですが 上手くできずエラーになってしまいどこがおかしいのか教えていただけないでしょうか・・ $(function() { $('input[name="check"]').change(function() { $('button').hide(); if ($('input[name="check"]:checked').length >= 3) { var _tmp = []; $('input[name="check"]:checked').each(function() { _tmp.push($(this).parents('li').attr('class').split(' ')); }); _tmp = Array.prototype.concat.apply([], _tmp); var data={}; for(var i=0;i<_tmp.length;i++){ var key=_tmp[i]; if(data[key]==undefined) data[key]=0; data[key]++; } var showClass = data.filter(function(value){ return ( value >= 3);} ); if (showClass) { $('.' + showClass).show(); } else { $('button').hide(); } }; }); });
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問