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

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

ただいまの
回答率

88.79%

jQueryでチェックした値をデータ属性に入れる

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 488

ninjanin

score 26

実現したいこと

チェックしたとき
valueを取得し、2つのボタン(#a#b)のデータ属性(data-check)に入れる

チェックを外したとき
valueを取得し、2つのボタン(#a#b)のデータ属性(data-check)から削除

該当のソースコード

こちらが実現したいHTMLです。

<div class="box">
  <input type="checkbox" value="1">
</div>

<div class="box">
  <input type="checkbox" value="2">
</div>

<button type="button" id="a" data-check_a="[]">ボタン</button>
<button type="button" id="b" data-check_b="[]">ボタン</button>

試したソースコード

間違ったところ、気を付けるべき点などを教えていただけましたら幸いです。

$(document).on("change",".box input", function(){ 
  // 対象のIDを取得
  var check_id = $(this).val();
  // 現在のIDを取得
  var check_id_arr_a = $('#a').attr('data-check');
  var check_id_arr_b = $('#b').attr('data-check');
  // チェックされたらIDを追加
  if( $(this:checked) ){
    check_id_arr_a.push(check_id);
    check_id_arr_b.push(check_id);
  }
  // チェックが外れたらIDを削除
  else{
    check_id_arr_a.slice(check_id);
    check_id_arr_b.slice(check_id);
  }
  // IDを更新
  $('#a').attr('data-check',check_id_arr);
  $('#b').attr('data-check',check_id_arr);
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/04/05 12:23

    今現状起きている問題は何でしょうか。起きていないのでしたら回答は得られにくいと思います。

    キャンセル

回答 2

checkベストアンサー

+2

こんにちは

間違ったところ、気を付けるべき点などを教えていただけましたら幸いです。

以下の2点かなと思います。

(1) data- 属性の取得と設定は .data()を使う。

(2) チェックされているかどうかの判定には、.prop() または .is() を使う。

上記2点ついて修正したコードを、以下

に挙げておきますので、確認してみてください。
参考になれば幸いです。

追記

コメント欄からご質問に回答します。

①「toArray」が何をしているのか?

$('input:checked') によって、チェックされている(0個以上2個以下の)チェックボックスを含むJQueryオブジェクトが返され、 JQueryオブジェクトのtoArray() メソッドで、該当したDOM要素の配列(Arrayオブジェクト)が返されます。

②「e =>」が何を指すのか?

e => e.value

はES6から導入されたアロー関数と呼ばれる形式の関数表記で、上記は以下と同じです。

function(e) {  return e.value;  }

この function を使うほうの書き方で、サンプルを書き換えると以下になります。

https://jsfiddle.net/jun68ykt/2acny4bu/4/

③「e.value」が何を指すのか?

e.value  には <input> の value 属性の値が入っています。

参考: https://developer.mozilla.org/ja/docs/Web/HTML/Element/input#value

.mapはループみたいなものですよね?

そうですね。配列 ary  があったときに、ary の各要素に対して何かをしたいときに for ループを使えば

for (var i=0;  i < ary.length;  i ++ ) {
  // ary[i] に対して何かをする
}

としますが、何をするのかによって、Arrayのメソッド map のほか、forEach, reduce などを使って forループの替わりに

  • ary.map(f)

  • ary.forEach(f)

  • ary.reduce(f)

などと書けます。なお上記で f は何らかの関数です。

参考:

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/05 12:49

    わかりやすく教えてくださってどうもありがとうございます!

    キャンセル

  • 2019/04/05 12:52

    どういたしまして!
    ちなみに、別解として以下でもよいかなと思いました。

    https://jsfiddle.net/jun68ykt/2acny4bu/3/

    キャンセル

  • 2019/04/05 13:49

    これはまたシンプルでいいですね!

    でもどうしてこちらで「value の配列を作成」できるのですか?

    .toArray().map(e => e.value);

    ①「toArray」が何をしているのか?
    ②「e =>」が何を指すのか?
    ③「e.value」が何を指すのか?
    かなり不思議です。

    .mapはループみたいなものですよね?

    キャンセル

  • 2019/04/05 15:12

    > これはまたシンプルでいいですね!

    どうもです👌 質問に対する答えは、回答のほうに追記しました。

    キャンセル

+1

<script>
$(function(){
  $(':checkbox').on('change',function(){
    $('button').data('check',$(':checkbox:checked').map(function(){
      return $(this).val();
    }).get());
  });
  $('button').on('click',function(){
    console.log($(this).data('check'));
  });
});
</script>

<input type="checkbox" value="1">
<input type="checkbox" value="2">
<button type="button" data-check="[]">ボタン</button>

属性を変える

前述の機能はプロパティを変えていましたが

<script>
$(function(){
  $(':checkbox').on('change',function(){
    $('button').attr('data-check',JSON.stringify($(':checkbox:checked').map(function(){
      return parseInt($(this).val()); //値が整数に限定される場合
    }).get()));
  });
});
</script>

<input type="checkbox" value="1">
<input type="checkbox" value="2">
<button type="button" data-check="[]">ボタン</button>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/05 12:50

    失礼いたしました。その後jun68ykt様のご回答でなんとか実現できました。

    キャンセル

  • 2019/04/05 12:56

    属性を変える方法も追記しておきました

    キャンセル

  • 2019/04/05 13:51

    ありがとうございます。引き続き研究中です。

    キャンセル

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

  • ただいまの回答率 88.79%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る