jquery - 根據下拉列表中的選項更改複選框的值

Question

我想創建一個表單，當用戶從下拉列表中選擇某個選項時，複選框的某些選項會被選中。

http://jsfiddle.net/qNMAk/1/

我在這裏開始了它，就如何實現它不知道。

Answer 1

有很多方法可以解決這個問題，但我建議將複選框的「類」設置爲選項值。然後，你可以使用jQuery這樣的：

$("select[name='types']").change(function() { 
    // Get the value selected (convert spaces to underscores for class selection) 
    var value = $(this).val().replace(' ', '_'); 

    // Clear checks, then check boxes that have class "value" 
    $(":checkbox").prop("checked",false).filter("."+value).prop("checked",true); 
}); 

見fiddle

Answer 2

你可以開始使用的<select>的change()事件，然後是這樣的：以某種方式

$('select').change(function(){ 
    switch($(this).val()) { 
     case 'Wedding': 
      $('#checkbox').prop('checked', true); 
      break; 
     case 'Birthday': 
      // something 
      break; 
    } 
}); 

Answer 3

你將不得不復選框涉及到選擇列表中的值，如果您修改標記提供姓名複選框等於選擇值

<select name="types"> 
<option value="Wedding">Wedding</option> 
<option value="Birthday">Birthday</option> 
<option value="Health Day">Health Day</option> 
<option value="Custom Event">Custom</option> 
</select> 
<br/><br/><br/> 
<fieldset> 
    <h3><span>1</span>Entertainment:</h3>  
     <input type="checkbox" name="Wedding" value="Wedding" /> DJ<br /> 
     <input type="checkbox" name="Birthday" value="Birthday" /> Birthday<br />   
</fieldset> 

jquery的部分的

$("select").change(function(e){ 
    $(":checkbox").prop("checked",false); //de-select all the checkboxes 
var v = $(this).val(); 
    $(":checkbox[name='"+v+"']").prop("checked",true); 
}); 

DEMO

肯定有實現該場景幾種方式，但本演示將讓你開始

Answer 4

的一種方法是使用custom data attribute: (data-*)：

DEMO

<select name="types"> 
    <option value="">Select</option> 
    <option value="wedding">Wedding</option> 
    <option value="birthday">Birthday</option> 
    <option value="health_day">Health Day</option> 
    <option value="custom_event">Custom</option> 
</select> 

<input type="checkbox" name="entertainment" data-evt="custom_event" value="dj" /> DJ<br /> 
<input type="checkbox" name="entertainment" data-evt="birthday" value="Magician" /> Magician<br /> 
<input type="checkbox" name="entertainment" data-evt="custom_event" value="liveband" /> Live Music 
... 

的jQuery

$('select').change(function(){ 
    var $evt = $(this).val(); // get type of event 
    $(':input[type="checkbox"]').prop('checked', false); // clear 
    $(':input[data-evt="' + $evt + '"]').prop('checked', true); // Set check 
}); 

Answer 5

你必須綁定每個下拉選項莫名其妙的複選框。一種可能的解決方案是將data屬性添加到每個選項並基於此選擇複選框。

<select name="types"> 
<option value="Wedding" data='dj,singer,wedding,lighting'>Wedding</option> 
<option value="Birthday" data='singer,lighting'>Birthday</option> 
<option value="Health Day" data='comedian,magician,outdoor'>Health Day</option> 
<option value="Custom Event">Custom</option> 
</select> 

$('select').change(function() { 
    $('input:checkbox').attr('checked', false); 
    var arrData = $('option:selected', this).attr('data').split(','); 
    for (i in arrData) { 
     $("input[value='" + arrData[i] + "']").attr('checked', true); 
    } 
}).change(); 

演示：http://jsfiddle.net/qNMAk/6/