用於多個表單元素的相同jQuery函數。我如何合併

Question

我有這個需要顯示和隱藏一個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'); 
     } 
    }); 

    }); 

Answer 1

看起來您正在進行某種類型的命名約定。您可以直接進入當前的上下文對象，獲取名稱並按照慣例操作。你可能想給你的選框字段一些特殊的CSS類，易於進行選擇：

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

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

    if ($(this).is(':checked')) 
     $(selector).show('slow'); 
    else 
     $(selector).hide('slow'); 
}); 

Answer 2

您可以從名稱獲取ID，像這樣：

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

它使用attribute-starts-with selector獲得的輸入，然後使用自己的.name property通過ID來獲得相應的元素。如果已選中，則在具有該ID的元素上運行.show('slow')，否則運行.hide('slow')。

Answer 3

$('input[name^=checkbox]').click(function() { 
    if(this.checked){ 
     $('#' + this.name).show('slow'); 
    } else{ 
     $('#' + this.name).hide('slow'); 
    } 

} 

編輯：使用選擇「以」將比檢查的indexOf，像其他人說

Answer 4

您可以使用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') 
    });