###実現したいこと
チェックしたとき
→valueを取得し、２つのボタン（#aと#b）のデータ属性（data-check）に入れる

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

###該当のソースコード
こちらが実現したいHTMLです。

HTML
1<div class="box">
2  <input type="checkbox" value="1">
3</div>
4
5<div class="box">
6  <input type="checkbox" value="2">
7</div>
8
9<button type="button" id="a" data-check_a="[]">ボタン</button>
10<button type="button" id="b" data-check_b="[]">ボタン</button>

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

jQeury
1$(document).on("change",".box input", function(){ 
2  // 対象のIDを取得
3  var check_id = $(this).val();
4  // 現在のIDを取得
5  var check_id_arr_a = $('#a').attr('data-check');
6  var check_id_arr_b = $('#b').attr('data-check');
7  // チェックされたらIDを追加
8  if( $(this:checked) ){
9    check_id_arr_a.push(check_id);
10    check_id_arr_b.push(check_id);
11  }
12  // チェックが外れたらIDを削除
13  else{
14    check_id_arr_a.slice(check_id);
15    check_id_arr_b.slice(check_id);
16  }
17  // IDを更新
18  $('#a').attr('data-check',check_id_arr);
19  $('#b').attr('data-check',check_id_arr);
20});
21
22

m.ts10806

2019/04/05 03:23

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

行動規範の内容に同意します

回答2件

ベストアンサー

こんにちは

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

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

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

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

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

.prop()を使用: https://jsfiddle.net/jun68ykt/2acny4bu/1/

.is()を使用： https://jsfiddle.net/jun68ykt/2acny4bu/2/

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

追記

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

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

$('input:checked')　によって、チェックされている（０個以上２個以下の）チェックボックスを含む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 ループを使えば

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

としますが、何をするのかによって、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 03:45

編集2019/04/05 06:10

jun68ykt

総合スコア9058

ninjanin

2019/04/05 03:49

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

jun68ykt

2019/04/05 03:52

どういたしまして！ちなみに、別解として以下でもよいかなと思いました。 https://jsfiddle.net/jun68ykt/2acny4bu/3/

ninjanin

2019/04/05 04:49

これはまたシンプルでいいですね！でもどうしてこちらで「value の配列を作成」できるのですか？ .toArray().map(e => e.value); ①「toArray」が何をしているのか？ ②「e =>」が何を指すのか？ ③「e.value」が何を指すのか？かなり不思議です。 .mapはループみたいなものですよね？

jun68ykt

2019/04/05 06:12

> これはまたシンプルでいいですね！どうもです???? 質問に対する答えは、回答のほうに追記しました。

行動規範の内容に同意します

javascript
1<script>
2$(function(){
3  $(':checkbox').on('change',function(){
4    $('button').data('check',$(':checkbox:checked').map(function(){
5      return $(this).val();
6    }).get());
7  });
8  $('button').on('click',function(){
9    console.log($(this).data('check'));
10  });
11});
12</script>
13
14<input type="checkbox" value="1">
15<input type="checkbox" value="2">
16<button type="button" data-check="[]">ボタン</button>

属性を変える

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

javascript
1<script>
2$(function(){
3  $(':checkbox').on('change',function(){
4    $('button').attr('data-check',JSON.stringify($(':checkbox:checked').map(function(){
5      return parseInt($(this).val()); //値が整数に限定される場合
6    }).get()));
7  });
8});
9</script>
10
11<input type="checkbox" value="1">
12<input type="checkbox" value="2">
13<button type="button" data-check="[]">ボタン</button>