0

チェックボックスが複数のチェックボックスでチェックされている場合、div を表示および非表示にする必要があります。

表示する必要がある各 div の ID は、チェックボックスの名前と同じになります。各チェックボックスを処理する関数を書かずにこれを達成する簡単な方法はありますか?

    $('input[name=checkbox_1]').click(function() {
        if ($('input[name=checkbox_1]').is(':checked')) {
            $('#checkbox_1').show('slow');
        }

        else {
            $('#checkbox_1').hide('slow');
        }
     });
     $('input[name=checkbox_2]').click(function() {
                   if ($('input[name=checkbox_2]').is(':checked')) {
            $('#checkbox_2').show('slow');
        }

        else {
            $('#checkbox_2').hide('slow');
        }
    });

  });
4

4 に答える 4

2

次のように、名前から ID を取得できます。

$('input[name^=checkbox_]').click(function() {
  $('#' + this.name)[this.checked ? 'show' : 'hide']('slow');
});

これは、attribute-starts-with セレクターを使用して入力を取得し、その.nameプロパティを使用して ID で適切な要素を取得します。チェックされている場合は を実行し.show('slow')、チェックされていない場合.hide('slow')はその ID を持つ要素で実行します。

于 2010-07-09T16:48:04.183 に答える
1 
$('input[name^=checkbox]').click(function() {
    if(this.checked){
       $('#' + this.name).show('slow');
    } else{
       $('#' + this.name).hide('slow');
    }

}

編集：他の人が言ったように、「開始」セレクターを使用する方がindexOfをチェックするよりも優れています

于 2010-07-09T16:48:34.213 に答える
0

toggle()ここの代わりに使用if ... elseして、コードをさらに削減できます。

('input[name^=checkbox_]').click(function(){
    $('#' + this.name).toggle('slow')
});

トグルは、要素を非表示/表示するだけでなく、交互のクリックでさまざまな機能を実行することもできます。

('input[name^=checkbox_]').toggle(function(){
    $('#' + this.name).hide('slow')
}, function(){
    $('#' + this.name).show('slow')
    } );
于 2010-07-09T16:51:28.463 に答える
0

ある種の命名規則が進行しているようです。現在のコンテキスト オブジェクトに到達し、名前を取得して規則を実行するだけです。簡単に選択できるように、チェックボックス フィールドに特別な css クラスを指定するとよいでしょう。

$('input.someCssClass').click(function() {

    var selector = '#' + $(this).attr('name');

    if ($(this).is(':checked'))
        $(selector).show('slow');
    else
        $(selector).hide('slow');
});
于 2010-07-09T16:53:16.667 に答える