클릭 시 다중 선택 상자의 모든 옵션을 선택하려면 어떻게 해야 합니까?

클릭 시 다중 선택 상자의 모든 옵션을 선택하려면 어떻게 해야 합니까?

이것은 나의 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(모두 선택)' 버튼을 클릭하면 Select(선택) 상자의 모든 옵션이 선택되도록 합니다.

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

시도해 보기:

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

그리고 여기 라이브 데모가 있습니다.

jQuery 버전 1.6 이상의 경우

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

또는 이전 버전의 경우:

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

라이브 데모

줘selected이와 같은 모든 옵션에 Attribute

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

이거 먹어봐요.

method selectAll()을 호출하고 다음과 같이 코드 함수를 작성합니다.

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

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

이것이 당신에게 도움이 되기를 바랍니다... :)

워킹 데모

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

1.6보다 오래된 jQuery를 사용하는 경우:

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

해라

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

기본적으로 나중에 필요한 경우 모든 EU 회원국을 선택할 수 있습니다.

저는 @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/

all 옵션 선택을 취소한 후 all 옵션 선택을 취소하려면 다음을 시도해 볼 수 있습니다. (Select All option의 값은 'all'이어야 함)

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

이것도 또 다른 해결책이 될 수 있습니다.

$('#countries').multiselect('selectAll', false)

언급URL : https://stackoverflow.com/questions/9924666/how-can-i-select-all-options-of-multi-select-select-box-on-click