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

这是我的 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() {
// ?
});
184532 次浏览
小开

对于 jQuery 版本1.6 + 然后

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

或者对于旧版本:

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

现场演示

小开
最佳答案

试试这个:

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

这是 现场演示。

小开

试试看

$('#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');
}
});
});

基本上允许你做一个选择所有的欧盟成员或东西，如果需要以后的线

小开

为所有这样的选项赋予 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);
});
小开

工作演示

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

如果使用的 jQuery 超过1.6:

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

试试这个,

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

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

如果您使用的是 JQuery 1.9 + ，那么上面的答案将不能在 Firefox 中工作。

因此，这里有一个最新的 jquery 代码，它可以在所有浏览器中工作。

参见 < strong > live demo

这是密码

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('');
}

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

小开

我可以用一种本地化的方式来制作@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/

小开

如果您还想取消选择所有选项一旦选择所有选项被取消选择，您可以尝试这样做: (选择所有选项的值应该是’所有’)

var selectAllIsSelected = false;
$('#select').on('change', function(event) {
var vals = $(this).val()
if (selectAllIsSelected == false && vals.indexOf("all")>-1 == true) {
$('.service_continent > option').prop('selected', true);
selectAllIsSelected = true;
$('.service_continent').trigger('change');
}
if(selectAllIsSelected == true && vals.indexOf("all")>-1 == false)
{
$('.service_continent > option').prop('selected', false);
selectAllIsSelected  = false;
$('.service_continent').trigger('change');
}
});

提交答案