Как сделать опцию «выбрать все» в html множественном поле выбора с помощью jquery?

Я создаю html-форму, которая включает в себя несколько полей выбора. Что я хочу сделать, так это сделать «выбрать все» в нескольких блоках выбора, чтобы, если пользователь нажмет на эту опцию, все параметры окна выбора будут автоматически выбраны, если пользователь отменит выбор, все остальные опции будут отменены. любые идеи, использующие jQuery?Как сделать опцию «выбрать все» в html множественном поле выбора с помощью jquery?

<select MULTIPLE> 
    <option>Select All</option> 
    <option>value1</option> 
    <option>value2</option> 
    <option>value3</option> 
    <option>value4</option> 
    <option>value5</option> 
    <option>value6</option> 
</select>

источник

2017-01-27 brhn.lok

Добро пожаловать на переполнение стека, пожалуйста, найдите время, чтобы следовать [переполнением стека тур] (http://stackoverflow.com/tour) и прочитать о [Как задать хороший вопрос?] (http://stackoverflow.com/help/how-to-ask) Также укажите нам соответствующий код, который вы написали для своего вопроса (вы также можете прочитать [Как создать минимальный, полный и проверенный пример] (http://stackoverflow.com/help/mcve)) –

хранить статус (выбранный/невыбранный) вариантов в data-selected атрибута события щелчка. Затем используйте его для выбора/отмены выбора всей опции списка.

$("select").on("click", function(){  
 
    if ($(this).find(":selected").text() == "Select All"){ 
 
    if ($(this).attr("data-select") == "false") 
 
     $(this).attr("data-select", "true").find("option").prop("selected", true); 
 
    else 
 
     $(this).attr("data-select", "false").find("option").prop("selected", false); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select multiple data-select="false">> 
 
    <option>Select All</option> 
 
    <option>value1</option> 
 
    <option>value2</option> 
 
    <option>value3</option> 
 
    <option>value4</option> 
 
    <option>value5</option> 
 
    <option>value6</option> 
 
</select>

источник

2017-01-27 09:28:46 Mohammad

, он выбирает все значения, когда я нажимаю на любое другое значение. –

@ brhn.lok О, я думаю, вы хотите выбрать все по щелчку любой опции. Я отредактировал его. – Mohammad

no @mohammad Я хочу, чтобы, если пользователь хочет выбрать все параметры, чтобы он/она не нуждался в ctlr + щелкните по всей опции, выберите все опции, которые будут использоваться как триггер для выбора всех других опций. –

Вы можете сделать что-то вроде этого с помощью JQuery:

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

 
$('#unselectAll').click(function() { 
 
    $('#persons option').prop('selected', false); 
 
});

input[type=button] { 
 
    width: 100px; 
 
    margin: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="button" id="selectAll" name="selectAll" value="Select All"><br /> 
 
<input type="button" id="unselectAll" name="unselectAll" value="Unselect All"><br /><br /> 
 

 

 
<select name="persons" id="persons" MULTIPLE size="8"> 
 
    <option value="FR">Franck</option> 
 
    <option value="GE">Georges</option> 
 
    <option value="DA">David</option> 
 
    <option value="LU">Luc</option> 
 
    <option value="DO">Donald</option> 
 
    <option value="FR">FRANCOIS</option> 
 
</select>

источник

2017-01-27 08:42:43

благодарит @ Gille Q., но я не хочу, чтобы какие-либо внешние кнопки я хотел выбрать все теги опций в поле выбора –

Как сделать опцию «выбрать все» в html множественном поле выбора с помощью jquery?

ответ

Смежные вопросы