선택 옵션에서 체크 박스를 사용하는 방법

94

클라이언트는 목록의 개별 항목으로 항목 이름과 함께 확인란이 포함 된 옵션 선택 메뉴가있는 디자인을 제공했습니다. 어쨌든 옵션 선택 메뉴 안에 확인란을 추가 할 수 있습니까?

주의 : 개발자는 메뉴를 효과적으로 만들기 위해 자신의 ID를 추가해야합니다. 가능한 경우 HTML CSS 코드 만 필요합니다.

javascript  html  css  html-select 
— Hero Tra
소스
5
네, 방금 자신이 코드를해야합니다 ... 수 또는 구글 ... "가능 어쨌든 인 경우 난 단지 HTML의 CSS 코드가 필요합니다"
— fmodos
5
@fmodos 가능? 우리에게 데모를 던져, 영업 이익하십시오 - 확인 이 아웃 ... 그것은 CSS와 HTML에서만 할 수 없습니다
— 씨 외국인
이 게시물 읽어 보시기 바랍니다 1stwebdesigns.com/blog/development/...
— kuldeep 주권
@ Mr.Alien 나는 이해하지 못했다 ... 나는 그가 "HTML CSS"일 수 있고 "HTML CSS"일 수는없는 구성 요소를 요구하고 있다고 생각했다 ... 나의 나쁜 : /
— fmodos

답변:

188

선택 요소 내부에 체크 박스를 배치 할 수 없지만 HTML, CSS 및 JavaScript를 사용하여 동일한 기능을 얻을 수 있습니다. 다음은 가능한 작업 솔루션입니다. 설명은 다음과 같습니다.

여기에 이미지 설명 입력

암호:

var expanded = false;

function showCheckboxes() {
  var checkboxes = document.getElementById("checkboxes");
  if (!expanded) {
    checkboxes.style.display = "block";
    expanded = true;
  } else {
    checkboxes.style.display = "none";
    expanded = false;
  }
}
.multiselect {
  width: 200px;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #dadada solid;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}
<form>
  <div class="multiselect">
    <div class="selectBox" onclick="showCheckboxes()">
      <select>
        <option>Select an option</option>
      </select>
      <div class="overSelect"></div>
    </div>
    <div id="checkboxes">
      <label for="one">
        <input type="checkbox" id="one" />First checkbox</label>
      <label for="two">
        <input type="checkbox" id="two" />Second checkbox</label>
      <label for="three">
        <input type="checkbox" id="three" />Third checkbox</label>
    </div>
  </div>
</form>
스 니펫 확장

설명:

먼저 "옵션 선택"이라는 텍스트를 표시하는 선택 요소와 선택 요소 ( <div class="overSelect">) 를 덮는 (겹치는) 빈 요소를 만듭니다. 사용자가 선택 요소를 클릭하는 것을 원하지 않습니다. 빈 옵션이 표시됩니다. 요소를 다른 요소와 겹치려면 상대적인 값이있는 CSS 위치 속성을 사용합니다. 순수한.

기능을 추가하기 위해 사용자가 선택 요소 ( <div class="selectBox" onclick="showCheckboxes()">) 가 포함 된 div를 클릭 할 때 호출되는 JavaScript 함수를 지정합니다 .

또한 체크 박스가 포함 된 div를 만들고 CSS를 사용하여 스타일을 지정합니다. 위에서 언급 한 JavaScript 함수 <div id="checkboxes">는 CSS 표시 속성의 값을 "없음"에서 "차단"으로 또는 그 반대로 변경합니다.

이 솔루션은 Internet Explorer 10, Firefox 34, Chrome 39 브라우저에서 테스트되었습니다. 브라우저에서 JavaScript를 활성화해야합니다.

추가 정보:

CSS 위치

한 div를 다른 div 위에 오버레이하는 방법

http://www.w3schools.com/css/css_positioning.asp

CSS 표시 속성

http://www.w3schools.com/cssref/pr_class_display.asp

— Vitfo
소스
1
참고 :이 솔루션은 둘 이상의 선택 목록을 수정해야하는 경우 더 많은 노력이 필요합니다. 적극적으로 유지 관리되는 플러그인을 사용하는 것이 좋습니다.
선택한 확인란의 값을 얻는 방법은 무엇입니까? 매우 좋은 대답이지만 plnkr 또는 이와 유사한 것을 제공하면 매우 도움이 될 것입니다.
— Pardeep Jain
7
사용자가 어떤 옵션을 선택하는 경우도 사라지지되는 상자를 선택합니다
— Pardeep 자이나교
1
이 답변은 훌륭하고 저에게 효과적이었습니다. 그러나 내가 한 가지 개선 사항이 있습니다. overselect내가 사용한 복잡한 인터페이스에서 잠재적으로 문제를 일으킬 수있는 div 대신 <option selected hidden>Select an option</option>. 최선의 사용은 hidden아니지만 작동합니다.
— Syknapse
2
하지만 외부를 클릭 할 때 드롭 다운을 숨기는 방법은 무엇입니까?
— saurabh kumar
58

지금까지 최고의 플러그인은 Bootstrap Multiselect입니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>jQuery Multi Select Dropdown with Checkboxes</title>

<link rel="stylesheet" href="css/bootstrap-3.1.1.min.css" type="text/css" />
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>

</head>

<body>

<form id="form1">

<div style="padding:20px">

<select id="chkveg" multiple="multiple">

    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>

</select>

<br /><br />

<input type="button" id="btnget" value="Get Selected Values" />

<script type="text/javascript">

$(function() {

    $('#chkveg').multiselect({

        includeSelectAllOption: true
    });

    $('#btnget').click(function(){

        alert($('#chkveg').val());
    });
});

</script>

</div>

</form>

</body>
</html>

여기 데모입니다

$(function() {

  $('#chkveg').multiselect({
    includeSelectAllOption: true
  });

  $('#btnget').click(function() {
    alert($('#chkveg').val());
  });
});
.multiselect-container>li>a>label {
  padding: 4px 20px 3px 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://davidstutz.de/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link href="https://davidstutz.de/bootstrap-multiselect/docs/css/bootstrap-3.3.2.min.css" rel="stylesheet"/>
<link href="https://davidstutz.de/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" rel="stylesheet"/>
<script src="https://davidstutz.de/bootstrap-multiselect/docs/js/bootstrap-3.3.2.min.js"></script>

<form id="form1">
  <div style="padding:20px">

    <select id="chkveg" multiple="multiple">
      <option value="cheese">Cheese</option>
      <option value="tomatoes">Tomatoes</option>
      <option value="mozarella">Mozzarella</option>
      <option value="mushrooms">Mushrooms</option>
      <option value="pepperoni">Pepperoni</option>
      <option value="onions">Onions</option>
    </select>
    
    <br /><br />

    <input type="button" id="btnget" value="Get Selected Values" />
  </div>
</form>
스 니펫 확장

— pmrotule
소스
1
솔루션에 이러한 많은 라이브러리를 사용할 필요가 없습니다. 일반 HTML 다중 선택 옵션을 사용할 수 있습니다. 감사!
— Power Star
3
HTML 다중 선택 옵션을 사용할 수 있다는 것을 알고 있지만 추악하고 사용자 친화적이지 않습니다.
— pmrotule 2015
4
이 플러그인의 동작이 마음에 들지만 부트 스트랩없이 사용하고 싶습니다. 비슷한 것이 있습니까?
— singpolyma
이 플러그인은 너무 버그가 많습니다. 150 개의 미해결 문제가 있으며 관리자는 시간이 없다고 말했습니다. 그래서 몇 가지 문제 후 내가 허용 대답과 VUE로 전환
— 올렉 Abrazhaev에게
1
@Erbureth 데모에서 외부 스크립트 / 스타일 시트 경로가 오래되었습니다 (데드 링크). URL을 수정하여 수정했습니다.
— pmrotule
18

A의 순수한 CSS의 방법, 당신은 사용할 수 있습니다 :checked과 함께 선택 ::before조건 내용을 인라인 선택합니다.

요소에 클래스 select-checkbox를 추가하고 select다음 CSS를 포함 하기 만하면 됩니다.

.select-checkbox option::before {
  content: "\2610";
  width: 1.3em;
  text-align: center;
  display: inline-block;
}
.select-checkbox option:checked::before {
  content: "\2611";
}

다음과 같이 일반 이전 유니 코드 문자 ( 이스케이프 된 16 진수 인코딩 사용 )를 사용할 수 있습니다.

또는 멋지게 꾸미고 싶다면 다음 FontAwesome 글리프를 사용할 수 있습니다.

스크린 샷

jsFiddle 및 Stack Snippets의 데모

코드 스 니펫 표시

참고 : 그러나 IE 호환성 문제에주의하십시오 .

— KyleMit
소스
1
때 문제의 multiple속성이 만드는 <select>대신 드롭 다운의 상자 같은 모습을 ...
— 수직 동기화
@vsync, 어떤 문제가 있는지 자세히 설명해 주시겠습니까? 바이올린을 포크하고 스크린 샷을 포함 할 수도 있습니다. 여기서 목표는 <select multiple>요소 에 적용 하는 것이므로 의도 된 사용 사례 여야합니다. 당신은 적용하여 개별 요소에 사용하기로 결정 그래서 CSS 선택자는 그 클래스를 적용하는 특정을해야 .select-checkbox클래스
— KyleMit
1
순수한 CSS 접근 방식을 찾고 있다면이 우아한 솔루션을 적극 권장합니다.
— Anish Sana
@KyleMit 좋은 솔루션 !!! 하지만 문제는 여러 항목을 선택하려면 간단한 선택 요소처럼 Ctrl 버튼을 사용해야한다는 것입니다.
— Lalit Rajput
@LalitRajput, 모든 브라우저의 모든 다중 선택 컨트롤에 대한 기본 상호 작용 디자인입니다. 나는 그것이 다소 불안정하거나 직관적이지 않다는 데 동의합니다. Javascript를 사용하여 다중 선택 상자에서 ctrl- 클릭의 필요성을 피하는 방법에 따라 원하는 경우 기본 동작을 재정의하는 방법을 항상 찾을 수 있습니다 . -이 업데이트 된 바이올린을
— KyleMit
14

다중 선택 , 특히 다중 항목을 시도하십시오 . 수많은 예제와 함께 훨씬 깨끗하고 관리되는 솔루션으로 보입니다. 소스를 볼 수도 있습니다.

<div>
  <div class="form-group row">
    <label class="col-sm-2">
      Basic Select
    </label>

    <div class="col-sm-10">
      <select multiple="multiple">
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
    </div>
  </div>

  <div class="form-group row">
    <label class="col-sm-2">
      Group Select
    </label>

    <div class="col-sm-10">
      <select multiple="multiple">
        <optgroup label="Group 1">
          <option value="1">1</option>
          <option value="2">2</option>
        </optgroup>
        <optgroup label="Group 2">
          <option value="6">6</option>
          <option value="7">7</option>
        </optgroup>
        <optgroup label="Group 3">
          <option value="11">11</option>
          <option value="12">12</option>
        </optgroup>
      </select>
    </div>
  </div>
</div>

<script>
  $(function() {
    $('select').multipleSelect({
      multiple: true,
      multipleWidth: 60
    })
  })
</script>
— Azghanvi
소스
이 링크가 질문에 답할 수 있지만 여기에 답변의 필수 부분을 포함하고 참조 용 링크를 제공하는 것이 좋습니다. 링크 된 페이지가 변경되면 링크 전용 답변이 무효화 될 수 있습니다. - 리뷰에서
— Justin Lessard
8

나는 @vitfo 대답에서 시작했지만 확인란 입력 대신 <option>안에 <select>넣고 싶습니다. 그래서 이것을 만들기 위해 모든 대답을 모았습니다. 내 코드가 있습니다. 누군가를 도울 수 있기를 바랍니다.

$(".multiple_select").mousedown(function(e) {
    if (e.target.tagName == "OPTION") 
    {
      return; //don't close dropdown if i select option
    }
    $(this).toggleClass('multiple_select_active'); //close dropdown if click inside <select> box
});
$(".multiple_select").on('blur', function(e) {
    $(this).removeClass('multiple_select_active'); //close dropdown if click outside <select>
});
	
$('.multiple_select option').mousedown(function(e) { //no ctrl to select multiple
    e.preventDefault(); 
    $(this).prop('selected', $(this).prop('selected') ? false : true); //set selected options on click
    $(this).parent().change(); //trigger change event
});

	
	$("#myFilter").on('change', function() {
      var selected = $("#myFilter").val().toString(); //here I get all options and convert to string
      var document_style = document.documentElement.style;
      if(selected !== "")
        document_style.setProperty('--text', "'Selected: "+selected+"'");
      else
        document_style.setProperty('--text', "'Select values'");
	});
:root
{
	--text: "Select values";
}
.multiple_select
{
	height: 18px;
	width: 90%;
	overflow: hidden;
	-webkit-appearance: menulist;
	position: relative;
}
.multiple_select::before
{
	content: var(--text);
	display: block;
  margin-left: 5px;
  margin-bottom: 2px;
}
.multiple_select_active
{
	overflow: visible !important;
}
.multiple_select option
{
	display: none;
    height: 18px;
	background-color: white;
}
.multiple_select_active option
{
	display: block;
}

.multiple_select option::before {
  content: "\2610";
}
.multiple_select option:checked::before {
  content: "\2611";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="myFilter" class="multiple_select" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
  <option>E</option>
</select>
스 니펫 확장

— Pavelbere
소스
6

확인란을 숨기려면 바깥 쪽을 클릭하는 대체 Vanilla JS 버전 :

let expanded = false;
const multiSelect = document.querySelector('.multiselect');

multiSelect.addEventListener('click', function(e) {
  const checkboxes = document.getElementById("checkboxes");
    if (!expanded) {
    checkboxes.style.display = "block";
    expanded = true;
  } else {
    checkboxes.style.display = "none";
    expanded = false;
  }
  e.stopPropagation();
}, true)

document.addEventListener('click', function(e){
  if (expanded) {
    checkboxes.style.display = "none";
    expanded = false;
  }
}, false)

stopPropagation ()과 함께 캡처 / 버블 링 단계 옵션을 활용하기 위해 onClick 대신 addEventListener를 사용하고 있습니다. 캡처 / 버블 링에 대한 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener 에서 읽을 수 있습니다.

나머지 코드는 vitfo의 원래 답변과 일치하지만 html에서 onclick ()이 필요하지 않습니다. 두 사람이 jQuery가 아닌이 기능을 요청했습니다.

다음은 코드 펜 예제입니다. https://codepen.io/davidysoards/pen/QXYYYa?editors=1010

— Davidysoards
소스
2

이 목적으로 git에서이 라이브러리를 사용할 수 있습니다. https://github.com/ehynds/jquery-ui-multiselect-widget

선택 상자를 시작하려면 이것을 사용하십시오.

    $("#selectBoxId").multiselect().multiselectfilter();

그리고 json (ajax 또는 모든 방법에서)에 데이터가 준비되면 먼저 데이터를 구문 분석 한 다음 js 배열을 할당하십시오

    var js_arr = $.parseJSON(/*data from ajax*/);
    $("#selectBoxId").val(js_arr);
    $("#selectBoxId").multiselect("refresh");
— 자야 파르 와니
소스
2

옵션 메뉴의 체크 박스 목록에이 코드를 사용하십시오.

.dropdown-menu input {
   margin-right: 10px;
}   
<div class="btn-group">
    <a href="#" class="btn btn-primary"><i class="fa fa-cogs"></i></a>
    <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" style="padding: 10px" id="myDiv">
        <li><p><input type="checkbox" value="id1" > OA Number</p></li>
        <li><p><input type="checkbox" value="id2" >Customer</p></li>
        <li><p><input type="checkbox" value="id3" > OA Date</p></li>
        <li><p><input type="checkbox" value="id4" >Product Code</p></li>
        <li><p><input type="checkbox" value="id5" >Name</p></li>
        <li><p><input type="checkbox" value="id6" >WI Number</p></li>
        <li><p><input type="checkbox" value="id7" >WI QTY</p></li>
        <li><p><input type="checkbox" value="id8" >Production QTY</p></li>
        <li><p><input type="checkbox" value="id9" >PD Sr.No (from-to)</p></li>
        <li><p><input type="checkbox" value="id10" > Production Date</p></li>
        <button class="btn btn-info" onClick="showTable();">Go</button>
    </ul>
</div>
스 니펫 확장

— 루페 쉬 완 케데
소스
dropdown-menu각 행에 체크 박스 요소를 포함 하는이 기본 접근 방식에 대한 완전한 예를 들어 , 여기 에 체크 박스를 부트 스트랩 드롭 다운
— KyleMit
1

옵션 목록이 AJAX 호출로 업데이트되기 전에 multiselect.js 파일을로드 할 수 있으므로 multiselect.js 파일을 실행하는 동안 다중 선택 기능을 적용하기위한 빈 옵션 목록이 있습니다. 따라서 먼저 AJAX 호출로 옵션 목록을 업데이트 한 다음 다중 선택 호출을 시작하면 동적 옵션 목록이있는 드롭 다운 목록이 표시됩니다.

이것이 당신을 도울 수 있기를 바랍니다.

다중 선택 드롭 다운 목록 및 관련 js 및 css 파일

// This function should be called while loading page
var loadParentTaskList = function(){
    $.ajax({
        url: yoururl,
        method: 'POST',
        success: function(data){
            // To add options list coming from AJAX call multiselect
            for (var field in data) {
                $('<option value = "'+ data[field].name +'">' + data[field].name + '</option>').appendTo('#parent_task');
            }
   
            // To initiate the multiselect call 
            $("#parent_task").multiselect({
                includeSelectAllOption: true
            })
        }
    });
}
// Multiselect drop down list with id parent_task
<select id="parent_task" multiple="multiple">
</select>
스 니펫 확장

— 야 스위니 모두 팔리
소스
0

동일한 페이지에 여러 선택 드롭 다운을 만들려면 :

.multiselect {
  width: 200px;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #dadada solid;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}

HTML :

 <form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" />First checkbox</label>
<label for="two">
<input type="checkbox" id="two" />Second checkbox</label>
<label for="three">
<input type="checkbox" id="three" />Third checkbox</label>
</div>
</div>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" />First checkbox</label>
<label for="two">
<input type="checkbox" id="two" />Second checkbox</label>
<label for="three">
<input type="checkbox" id="three" />Third checkbox</label>
</div>
</div>

</form>

Jquery 사용 :

 function showCheckboxes(elethis) {
        if($(elethis).next('#checkboxes').is(':hidden')){
            $(elethis).next('#checkboxes').show();
            $('.selectBox').not(elethis).next('#checkboxes').hide();  
        }else{
            $(elethis).next('#checkboxes').hide();
            $('.selectBox').not(elethis).next('#checkboxes').hide();
        }
 }
— Ashish
소스
-2

클래스 생성 div를 추가하고 클래스 양식 제어를 추가하십시오. iam은 JSP, boostrap4를 사용합니다. c : foreach는 무시하십시오.

<div class="multi-select form-control" style="height:107.292px;">
        <div class="checkbox" id="checkbox-expedientes">
            <c:forEach var="item" items="${postulantes}">
                <label class="form-check-label">
                    <input id="options" class="postulantes" type="checkbox" value="1">Option 1</label>
            </c:forEach>
        </div>
    </div>
— 후안 실 루푸 마자
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.