使用Jquery基于select选项检查特定复选框

时间:2010-09-22 23:41:30

标签: javascript jquery checkbox

我正在尝试根据选项选中复选框。因此,如果用户从下拉列表中选择一个选项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';

设置数组,使每个['VALUE']成为select的选项。 (用户选择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>

提前致谢!

2 个答案:

答案 0 :(得分:1)

您可能最好将类添加到从属复选框。例如,如果一个人检查复选框A然后复选框B,C和D应该被自动检查,你可以在复选框B,C和D中添加一个check_A类。然后你只需要做一个jQuery选择在.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');
}

答案 1 :(得分:0)

在你的例子中你想要这样的东西

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/