使用Jquery根據選擇選項檢查特定的復選框

Question

我正在嘗試根據選擇選項選中復選框。 因此，如果用戶從下拉菜單中選擇一個選項3，我希望它自動選中ID為4、24和17的復選框。

我已經使用PHP預定義了變量，因此我的數組如下：

var per =[]; 

per['3'] = []; 
per['3']['4'] = '4'; 
per['3']['24'] = '24'; 
per['3']['17'] = '17'; 

per['4'] = []; 
per['4']['null'] = 'null'; 

per['6'] = []; 
per['6']['19'] = '19';

設置了數組，因此per ['VALUE']是選擇的選項。 （用戶選擇3，並勾選4、24和17復選框）。

我設法使用警報來測試是否可以提取正確的數據。 我認為這可能是我對復選框的殺害。

我的jQuery代碼：

    $("#get_boxes").change(function () {
    var per =[]; 

per['3'] = []; 
per['3']['4'] = '4'; 
per['3']['24'] = '24'; 
per['3']['17'] = '17'; 

per['4'] = []; 
per['4']['null'] = 'null'; 

per['6'] = []; 
per['6']['19'] = '19';

    var role = $(this).val();
        $.each(per[role], function(k, v){
            if(v != undefined) { 
            $('#'+v).attr('checked', true);
            }
        });
    });

的HTML：

<select name="role" id="get_boxes" class="full-width">
    <option value="null">---</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="6">Six</option>
</select>
<p class="halflist">
        <input type="checkbox" name="permission[1]" id="1" />
        <label for="1" class="inline">Tick One</label>
</p><p class="halflist">
        <input type="checkbox" name="permission[4]" id="4" />
        <label for="4" class="inline">Tick Four</label>
</p><p class="halflist">
        <input type="checkbox" name="permission[5]" id="5" />
        <label for="5" class="inline">Tick Five</label>
</p><p class="halflist">
        <input type="checkbox" name="permission[6]" id="6" />
        <label for="6" class="inline">Tick Six</label>
</p><p class="halflist">
        <input type="checkbox" name="permission[2]" id="2" />
        <label for="2" class="inline">Tick Two</label>
</p>

提前致謝！

Answer 1

您最好將類添加到從屬復選框。 例如，如果某人先選中復選框A，然后又應該自動選中復選框B，C和D，則可以向復選框B，C和D添加一類check_A。然后，您只需執行jQuery select在.check_A上。

HTML ...

<input type="checkbox" id="A" />
<input type="checkbox" id="B" class="check_A" />
<input type="checkbox" id="C" class="check_A" />
<input type="checkbox" id="D" class="check_A" />
<input type="checkbox" id="E" />
<input type="checkbox" id="F" class="check_E" />
<input type="checkbox" id="G" class="check_E" />
<input type="checkbox" id="H" class="check_E" />

Javascript ...

$('#A').change(function() {
    $('.check_A').attr('checked', 'checked');
}

Answer 2

在您的示例中，您想要這樣的東西

var ar = ['Odd','Even'];
ar['Odd'] = [1,3,5,7,9];
ar['Even'] = [0,2,4,6,8];
$('select').change(function() {
    var t = $(this).val();
    $.each(ar[t], function(key,value) {
        $('#'+value).attr('checked',true);
    });
});​

顯然，這是一個不同的上下文，但是您可以輕松替換要替換的值。

這是一個實時示例：

http://jsfiddle.net/sUHNp/