グループ指定でチェックボックスの一括ON/OFF切り替え

$(function(){
  var e_group = $('fieldset.group');
  var target_name = e_group.data('target-name');
  var targets = $('input[name="'+target_name+'"]');
  e_group.find('input').click(function(){
    var val = $(this).val();
    var vals = val.split(',');
    //console.log(vals);
    var is_check = $(this).is(':checked');
    var target = targets;
    for(var i=0;i<vals.length;i++){
      target = targets.filter('[value="'+vals[i]+'"]');
      target.get(0).checked = is_check;
    }
  });


  // 2回value書くの面倒なので、手抜き
  $('label').each(function(){
    var val = $(this).find('input').val();
    var span = $('<span>').text(val);
    $(this).append(span);
  });
});

hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。

グループ指定でチェックボックスの一括ON/OFF切り替え

Groups

Target

JavaScript

CSS

HTML

ABOUT