1

複数の選択オプションを使用してjqueryの配列を使用してチェックボックスをチェックしようとしました。たとえば、オプション1とオプション3がクリックされた場合、配列にIDが設定されているチェックボックスがオンになり、削除するとオフになります。

<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" />

そして最後のjquery

$(document).ready(function() {
    $("#lab_abbr").live("change", function(e)  {
        var o1 = ['lab_one', 'lab_three'];
        var o2 = ['lab_two', 'lab_six'];
        var o3 = ['lab_four, 'lab_five'];


    });
});

よろしく、ベスミール

4

2 に答える 2

6

男に魚を与える...

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); 
  });
});

デモ: http://jsbin.com/onapem/edit#javascript,html

男に釣りを教え...

分解して、各部分が何をするか見てみましょう。

一種の連想配列として機能するオブジェクトを作成することから始めます。基本的に、ある値を別の値に関連付けることができます。この場合、選択したオプションの値 (「o1」または「o2」) を一連のチェックボックスに関連付けます。

var mapping = { 'o1' : ['lab_one', 'lab_three'] };

次に、メソッドを使用してロジックをメニューのchangeイベントにバインドします。select$.on

$("#lab_abbr").on("change", function(){
  /* React to the change */
});

このメニューが変更されるたびに、そのオプションを循環させたいと考えています。オプションが選択されているかどうかについてはまだ心配していません。すべてのオプションにアクセスしたいだけです。$.eachiterator メソッドを使用してこれを行います。

$.each( this.options, function(){
  /* Do something with each individual <option /> */
});

このブロック内で、このオプション値に関連付けられているチェックボックス ID を収集します。たとえば、「o1」に関連付けられたすべての値が必要な場合 (これは$.each、 を介した最初のオプションを表します)、次のようにすることができます。

alert( mapping['o1'] ); // ['lab_one', 'lab_three']

ただし、これを動的に行うつもりはありません。内$.eachでは、キーワードthisは常に現在<option />処理されているものを参照します。その値を使用して、それに関連付けられているフィールドを検索できます。

mapping[ this.value ]; // returns an array

これを CSS セレクターに変換して jQuery を渡したいので.join()、返された配列でメソッドを使用して文字列を作成します。

mapping[ this.value ].join(", #");

この.join()メソッドは、各値の間に追加する文字列を受け入れます。上記の場合、最初の繰り返しで次の文字列が返されます。

"lab_one, #lab_three"

, #配列から 2 つの値を分離していることに注意してください。#この文字列の前にもう 1 つ必要なので、それ#lab_oneも選択されます。これは、結果の文字列に文字を連結することで解決されました。

$( "#" + mapping[ this.value ].join(", #") )

最後に$.prop()、要素にプロパティ値を設定できるメソッドを呼び出します。プロパティを設定していきcheckedます。

メソッドを使用して$.prop()、設定したいプロパティと設定したい値を渡します。

$( /*...*/ ).prop("checked", this.selected );

は、この反復で現在アクセスしているものをthis表します。には、選択されているかどうかを示すまたは-を返すというネイティブ プロパティがあります。これを使用して、 の値がどうあるべきかを jQuery に伝えます。<option />$.each()<option />selectedtruefalse"checked"

したがって、処理されるオプションが である場合、selected関連付けられている各チェックボックスも処理されます。同様に、処理されているオプションが選択されていない場合、関連付けられているチェックボックスも選択されません。

小さい魚が欲しいですか？

これをさらに短縮したい場合は、jQuery セレクターをオブジェクトに直接格納できます。

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 ] ).prop( "checked", this.selected ); 
  });
});

デモ: http://jsbin.com/onapem/2/edit

于 2012-05-09T21:26:32.837 に答える
0

をオブジェクトとして定義しvar、単に選択を繰り返してチェックボックスをオンにする必要があります。下記参照、

デモ

$(document).ready(function() {
    var selections = {
                  o1: ['lab_one', 'lab_three'],
                  o2: ['lab_two', 'lab_six'],
                  o3: ['lab_four', 'lab_five']
    };

    var $checkbox = $(':checkbox');

    $("#lab_abbr").on("change", function(e)  {

        $.each ($checkbox, function (i, ck) { //uncheck all checkbox
            this.checked = false;
        });

        $.each($(this).val(), function (idx, val) { //iterate over selected options
            $.each (selections[val], function (i, v) { //iterate over the selections
                $('#' + v).prop('checked', true); //set the checkbox
            });        
        });        
    });
});
于 2012-05-09T21:09:23.407 に答える