0

これは、このサイトの投稿に関する質問です... 配列を使用したjqueryチェックボックスチェック

http://jsbin.com/onapem/2/editへのデモリンクがあり、コードは...

<select id="lab_abbr" multiple >
  <option value="o1">Option 1</option>
  <option value="o2">Option 2</option>
  <option value="o3">Option 3</option>
</select>

<input type="checkbox" name="lab[one]" id="lab_one" />
<input type="checkbox" name="lab[two]" id="lab_two" />
<input type="checkbox" name="lab[three]" id="lab_three" />
<input type="checkbox" name="lab[four]" id="lab_four" />
<input type="checkbox" name="lab[five]" id="lab_five" />
<input type="checkbox" name="lab[six]" id="lab_six" />

JS

var mapping = { 'o1' : ['lab_one', 'lab_three'], 'o2' : ['lab_two', 'lab_six'], 
                'o3' : ['lab_four', 'lab_five'] };

$("#lab_abbr").on("change", function () {
  $.each( this.options, function () {
    $( "#" + mapping[ this.value ].join(", #") ).prop("checked", this.selected); 
  });
});

この機能を使用したいのですが、値を一度しかマッピングできません。したがって、「lab_one」を o1 だけでなく o3 にもマップしたい場合、それはできません。最後のケースを使用するだけなので、o1 から「lab_one」を取り除く効果があります。これを行うとよいでしょう。たとえば、サッカー選手をクリックすると、彼が得点したチームがチェックされます。値を複数回割り当てる方法はありますか?

どんな助けでも大歓迎です。

4

1 に答える 1

0

チェックしたいチェックボックスを各オプションに添付されたデータ属性に入れ、それに基づいてチェックボックスをオンまたはオフにします。

HTML:

<select id="lab_abbr" multiple >
  <option value="o1" data-elem="one, three"      >Option 1</option>
  <option value="o2" data-elem="two, six"        >Option 2</option>
  <option value="o3" data-elem="one, four, five" >Option 3</option>
</select>

<input type="checkbox" name="lab[one]"   id="lab_one"   />
<input type="checkbox" name="lab[two]"   id="lab_two"   />
<input type="checkbox" name="lab[three]" id="lab_three" />
<input type="checkbox" name="lab[four]"  id="lab_four"  />
<input type="checkbox" name="lab[five]"  id="lab_five"  />
<input type="checkbox" name="lab[six]"   id="lab_six"   />

JS

$("#lab_abbr").on("change", function () {
    var elems = $.map($('option:selected', this).data('elem').split(','), function(x) {
         return $.trim(x);
    });
    $('[name^="lab\\["]').prop('checked', function() {
        return $.inArray(this.id.replace('lab_',''), elems) != -1;
    });
});

フィドル

于 2013-07-25T19:50:03.970 に答える