如何在单击时选择多选选择框的所有选项?


72

这是我的HTML

<select name="countries" id="countries" MULTIPLE size="8">
   <option value="UK">UK</option>
   <option value="US">US</option>
   <option value="Canada">Canada</option>
   <option value="France">France</option>
   <option value="India">India</option>
   <option value="China">China</option>
</select>
<br />
<input type="button" id="select_all" name="select_all" value="Select All">

当用户单击“全选”按钮时,我希望选择选择框中的所有选项

$('#select_all').click( function() {
    // ?
});

我建议您阅读这份+ TJ Croweder评论
gdoron支持Monica 2012年

Answers:


181

尝试这个:

$('#select_all').click(function() {
    $('#countries option').prop('selected', true);
});

这是一个现场演示


1
谢谢+1。为什么在中需要第二个prop('selected', 'selected')
凯文·梅雷迪斯

2
@KevinMeredith,它不是必需的,这是对API的滥用。这个答案说明了堆栈溢出的问题性质,发问者不知道什么是最佳答案,但还是选择了一个。该答案会弹出顶部,所有下一个访问者都会在不知道答案错误的情况下对其进行投票。您知道这是错误的,真是令人惊讶,但同样也对此表示反对。(对不起,达林,这确实不是您个人所反对的。)
gdoron支持Monica 2013年

1
@gdoron,你是对的。prop对于诸如selected和的属性,该方法应使用布尔值checked。我已经更新了答案。
Darin Dimitrov

1
@gdoron是的,您对读者的性质是正确的,但是我们应该更加注意编辑者的性质。从我的角度来看,问题出在对达林答案错误编辑中,该答案被接受并被忽略。当我的正确答案被错误地编辑时,我个人也遇到了同样的问题,但是由于其他许多通知,我无法看到它并将其回滚。
2013年

1
在这种情况下:+1。很抱歉将您的编辑错误归咎于您。
gdoron支持Monica 2013年

17

对于jQuery 1.6+之后

$('#select_all').click( function() {
    $('#countries option').prop('selected', true);
});

或旧版本:

$('#select_all').click( function() {
    $('#countries option').attr('selected', 'selected');
});

现场演示


selected="true"是无效的xhtml,也许会更好使用selected="selected"
Alp 2012年

2
@阿尔卑斯 阅读规范:“ selected [CI]设置后,此布尔属性指定此选项为预选择的。” 布尔值!。并从文档中看到以下示例:$("input").prop("checked", true);
gdoron支持Monica 2012年

@阿尔卑斯 可以,您不是唯一的一个,这里的所有答案和支持者都认为相同... :-)
gdoron支持Monica 2012年

我是对的,XHTML Strict只允许selected =“ selected”。自己检查一下@ validator.w3.org / check 。value of attribute "selected" cannot be "true"; must be one of "selected"
2012年

@阿尔卑斯 全部选中后,在我的DEMO中检查DOM。你看到那里了selected="true"吗?我也不... :)。
gdoron支持Monica 2012年

4

selected属性像这样所有选项

$('#countries option').attr('selected', 'selected');

用法:

$('#select_all').click( function() {
    $('#countries option').attr('selected', 'selected');
});

更新资料

如果您使用的是1.6+版本,更好的选择是使用.prop()而不是.attr()

$('#select_all').click( function() {
    $('#countries option').prop('selected', true);
});

1
Prabhu继续前进。为此+1。
Shree 2012年

@ShreeKhanal。请注意,对于jQuery 1.6+,您应该使用.prop而不是attr用于此类事情。
gdoron支持Monica 2012年

@gdoron,但你的答案告诉,反正我会更新
Starx

4

尝试这个,

调用方法selectAll()onclick并编写代码函数,如下所示

function selectAll(){
    $("#id").find("option").each(function(this) {
    $(this).attr('selected', 'selected');
    });
}

2

如果您使用的是JQuery 1.9+,则以上答案在Firefox中将不起作用。

因此,这是适用于所有浏览器的最新jquery的代码。

观看现场演示

这是代码

var select_ids = [];
$(document).ready(function(e) {
    $('select#myselect option').each(function(index, element) {
        select_ids.push($(this).val());
    })
});

function selectAll()
{
    $('select#myselect').val(select_ids);
}

function deSelectAll()
{
    $('select#myselect').val('');
}

希望对你有帮助... :)


1

工作演示

$('#select_all').click( function() {
    $('select#countries > option').prop('selected', 'selected');
});

如果您使用的jQuery早于1.6:

$('#select_all').click( function() {
    $('select#countries > option').attr('selected', 'selected');
});

0

尝试

$('#select_all').click( function() {
    $('#countries option').each(function(){
        $(this).attr('selected', 'selected');
    });
});

这会给您将来更多的写作空间,例如

$('#select_all').click( function() {
    $('#countries option').each(function(){
        if($(this).attr('something') != 'omit parameter')
        {
            $(this).attr('selected', 'selected');
        }
    });
});

基本上允许您选择所有欧盟成员,或者在日后需要时进行选择


@Starx。为什么$('#countries')...?
gdoron支持Monica

0

我能够以本地方式@ jsfiddle进行制作。希望它会有所帮助。

在工作时发布改进的答案,并帮助他人。

$(function () { 

    $(".example").multiselect({
                checkAllText : 'Select All',
            uncheckAllText : 'Deselect All',
            selectedText: function(numChecked, numTotal, checkedItems){
              return numChecked + ' of ' + numTotal + ' checked';
            },
            minWidth: 325
    });
    $(".example").multiselect("checkAll");    

});

http://jsfiddle.net/shivasakthi18/25uvnyra/

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.