चयन विकल्प के अंदर चेकबॉक्स का उपयोग कैसे करें

Question

क्लाइंट ने मुझे एक डिज़ाइन दिया है जिसमें सूची में अलग-अलग वस्तुओं के रूप में आइटम नाम के साथ चेकबॉक्स वाला एक चयन विकल्प मेनू है। क्या कोई भी विकल्प विकल्प मेनू के अंदर एक चेकबॉक्स जोड़ने के लिए संभव है?

NB: डेवलपर को मेनू को प्रभावी बनाने के लिए अपनी स्वयं की आईडी जोड़ने की आवश्यकता है, यदि संभव हो तो मुझे केवल HTML सीएसएस कोड की आवश्यकता है।

Comments

"मुझे केवल HTML सीएसएस कोड की आवश्यकता है यदि यह वैसे भी संभव है" ... हाँ, यह संभव है ... आपको बस इसे खुद से कोड करना होगा या इसे Google करना होगा

— fmodos

@fmodos संभव है? कृपया हमें एक डेमो फेंक दें, और ओपी - इस की जांच करें ... यह केवल CSS और HTML के साथ संभव नहीं है

— श्री एलियन

कृपया इस पोस्ट को पढ़ें 1webdesigns.com/blog/development/…

— kuldeep raj

@ Mr.Alien मुझे याद आया ... मुझे लगा कि वह एक घटक के लिए पूछ रहा था कि "एचटीएमएल सीएसएस हो सकता है और" नहीं "केवल" एचटीएमएल सीएसएस "होना चाहिए ... मेरा बुरा: /

— fmodos

Answer 1

आप चेकबॉक्स को चुनिंदा तत्व के अंदर नहीं रख सकते हैं, लेकिन आप HTML, CSS और जावास्क्रिप्ट का उपयोग करके समान कार्यक्षमता प्राप्त कर सकते हैं। यहाँ एक संभव कार्य समाधान है। व्याख्या इस प्रकार है।

---

कोड:

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"> ) )। हम नहीं चाहते कि उपयोगकर्ता चयन तत्व पर क्लिक करें - यह एक खाली विकल्प दिखाएगा। अन्य तत्व के साथ तत्व को ओवरलैप करने के लिए हम मूल्य सापेक्ष के साथ सीएसएस स्थिति संपत्ति का उपयोग करते हैं | पूर्ण।

कार्यक्षमता जोड़ने के लिए हम एक जावास्क्रिप्ट फ़ंक्शन निर्दिष्ट करते हैं जिसे तब कहा जाता है जब उपयोगकर्ता उस div पर क्लिक करता है जिसमें हमारा चयन तत्व ( <div class="selectBox" onclick="showCheckboxes()">) होता है।

हम अपने चेकबॉक्स भी बनाते हैं और सीएसएस का उपयोग करके इसे बनाते हैं। उपर्युक्त जावास्क्रिप्ट फ़ंक्शन केवल <div id="checkboxes">सीएसएस प्रदर्शन संपत्ति के मूल्य को "कोई नहीं" से "ब्लॉक" और इसके विपरीत बदल देता है।

समाधान का परीक्षण निम्न ब्राउज़रों में किया गया: इंटरनेट एक्सप्लोरर 10, फ़ायरफ़ॉक्स 34, क्रोम 39। ब्राउज़र को जावास्क्रिप्ट सक्षम होना चाहिए।

---

अधिक जानकारी:

सीएसएस स्थिति

एक div को दूसरे div पर ओवरले कैसे करें

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

सीएसएस प्रदर्शन संपत्ति

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

Comments

FYI करें: यदि एक से अधिक चुनिंदा सूची को संशोधित करने की आवश्यकता है, तो इस समाधान के लिए अधिक प्रयास की आवश्यकता होगी। मेरा सुझाव है कि कुछ सक्रिय रूप से बनाए रखा प्लगइन के लिए जा रहा है।

चयनित चेकबॉक्स का मूल्य कैसे प्राप्त करें? बहुत अच्छा जवाब लेकिन यह बहुत उपयोगी होगा यदि आप plnkr या ऐसा कुछ प्रदान करते हैं।

— परदीप जैन

उपयोगकर्ता द्वारा किसी भी विकल्प का चयन करने पर बॉक्स का चयन करना भी गायब नहीं है

— Pardeep Jain

यह जवाब बहुत अच्छा है और इसने मेरे लिए काम किया। हालांकि इस पर मैंने एक सुधार किया है। overselectडिव के बजाय जो संभावित रूप से मेरे द्वारा उपयोग किए जाने वाले जटिल इंटरफ़ेस में कुछ समस्याएं पैदा कर सकता है <option selected hidden>Select an option</option>। यह सबसे अच्छा उपयोग नहीं हो सकता है, hiddenलेकिन यह काम करता है।

— सिरकनैप्स

लेकिन ड्रॉपडाउन को कैसे छिपाया जाए, जब हम बाहर क्लिक करते हैं?

— सौरभ कुमार

Answer 2

अब तक का सबसे अच्छा प्लगइन बूटस्ट्रैप मल्टीसेप्ट है

<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>

यहाँ DEMO है

$(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>

Comments

आपको अपने समाधान के लिए इन पुस्तकालयों का अधिक उपयोग करने की आवश्यकता नहीं है। आप बस नियमित रूप से HTML एकाधिक चयन विकल्प का उपयोग कर सकते हैं। धन्यवाद!

— पावर स्टार

मुझे पता है कि मैं HTML एकाधिक चयन विकल्प का उपयोग कर सकता हूं, लेकिन मैंने इसे बदसूरत पाया और उपयोगकर्ता के अनुकूल नहीं।

— शाम्रोतुल्य

मुझे यह प्लगइन का व्यवहार पसंद है, लेकिन इसे बूटस्ट्रैप के बिना उपयोग करना चाहते हैं ... कुछ इसी तरह?

— सिंगापोलीमा

यह प्लगइन बहुत छोटा है ... उनके पास 150 खुले मुद्दे हैं और अनुरक्षक ने कहा कि उनके पास समय नहीं है। इसलिए कुछ मुद्दों के बाद मैंने स्वीकार किए गए उत्तर और

— प्रतिज्ञा पर

@Erbureth बाहरी स्क्रिप्ट / स्टाइलशीट पथ डेमो (मृत लिंक) में पुराने थे। मैंने इसे ठीक करने के लिए यूआरएल को अपडेट किया।

— pmrotule

Answer 3

एक शुद्ध सीएसएस दृष्टिकोण के लिए, आप :checkedचयनकर्ता के साथ संयुक्त ::beforeचयनकर्ता इनलाइन सशर्त सामग्री का उपयोग कर सकते हैं ।

बस select-checkboxअपने selectतत्व में वर्ग जोड़ें और निम्नलिखित सीएसएस शामिल करें:

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

आप सादे पुराने यूनिकोड वर्णों (एक बची हुई हेक्स एन्कोडिंग के साथ ) का उपयोग कर सकते हैं :

• Ot मतपेटी -\2610
• ☑ मतदान के साथ बॉक्स की जाँच करें -\2611

या यदि आप चीजों को मसाला देना चाहते हैं, तो आप इन FontAwesome ग्लिफ़ का उपयोग कर सकते हैं

• .fa वर्ग ओ -\f096
• .fa-check-square-o -\f046

JsFiddle और स्टैक स्निपेट्स में डेमो

select {
  width: 150px;
}

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

.select-checkbox-fa option::before {
  font-family: FontAwesome;
  content: "\f096";
  width: 1.3em;
  display: inline-block;
  margin-left: 2px;
}
.select-checkbox-fa option:checked::before {
  content: "\f046";
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<h3>Unicode</h3>
<select multiple="" class="form-control select-checkbox" size="5">
  <option>Dog</option>
  <option>Cat</option>
  <option>Hippo</option>
  <option>Dinosaur</option>
  <option>Another Dog</option>
</select>

<h3>Font Awesome</h3>
<select multiple="" class="form-control select-checkbox-fa" size="5">
  <option>Dog</option>
  <option>Cat</option>
  <option>Hippo</option>
  <option>Dinosaur</option>
  <option>Another Dog</option>
</select>

नोट : IE संगतता मुद्दों से सावधान रहें

Comments

यह एक समस्या है जब multipleविशेषता <select>ड्रॉपडाउन के बजाय एक बॉक्स की तरह दिखती है ...

— vsync

@vsync, क्या आप इस बात पर विस्तार से बता सकते हैं कि आपको क्या समस्या हो रही है, हो सकता है कि फ़िडेल को भी फोर्क करें और एक स्क्रीनशॉट शामिल करें। यहां लक्ष्य एक <select multiple>तत्व पर लागू करना है , ताकि इच्छित उपयोग मामला होना चाहिए। CSS चयनकर्ताओं उस वर्ग को लागू करने के लिए विशिष्ट होना चाहिए ताकि आप लगाने से अलग-अलग तत्वों पर उपयोग करने का फैसला .select-checkboxवर्ग

— KyleMit

यदि आप शुद्ध सीएसएस दृष्टिकोण की तलाश कर रहे हैं, तो इस सुरुचिपूर्ण समाधान की सिफारिश करें।

— अनीश सना

@KyleMit अच्छा समाधान !!! लेकिन समस्या यह है कि अगर मैं कई वस्तुओं का चयन करना चाहता हूं तो मुझे Ctrl बटन का उपयोग सरल चयन तत्व की तरह करना होगा।

— ललित राजपूत

@LalitRajput, यकीन है, कि सभी ब्राउज़रों में सभी एकाधिक चयन नियंत्रणों के लिए डिफ़ॉल्ट इंटरैक्शन डिज़ाइन। मैं मानता हूं कि यह एक प्रकार का विचित्र या अनजाना है। आप हमेशा उस डिफ़ॉल्ट व्यवहार को ओवरराइड करने के तरीके खोज सकते हैं यदि आप चाहते हैं कि जावास्क्रिप्ट के उपयोग से बहु-चयन बॉक्स में ctrl-click की आवश्यकता से कैसे बचा जाए? - इस अपडेटेड

— फिडेल को

Answer 4

एकाधिक-चयन का प्रयास करें , विशेष रूप से कई-आइटम । उदाहरण के टन के साथ बहुत साफ और प्रबंधित समाधान दिखता है। आप स्रोत भी देख सकते हैं।

<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>

Comments

हालांकि यह लिंक प्रश्न का उत्तर दे सकता है, लेकिन उत्तर के आवश्यक भागों को शामिल करना और संदर्भ के लिए लिंक प्रदान करना बेहतर है। लिंक-केवल उत्तर अमान्य हो सकते हैं यदि लिंक किए गए पृष्ठ बदल जाते हैं। - रिव्यू से

— जस्टिन लेसार्ड

Answer 5

मैंने @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>

Answer 6

वैकल्पिक वेनिला जेएस संस्करण चेकबॉक्स छिपाने के लिए बाहर क्लिक करें:

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 () की कोई आवश्यकता नहीं) से मेल खाता है। कुछ लोगों ने इस कार्यक्षमता sans jQuery का अनुरोध किया है।

यहाँ कोडप उदाहरण https://codepen.io/davidysoards/pen/QXYYYa?editors=1010 है

Answer 7

आप इस लाइब्रेरी का उपयोग इस उद्देश्य के लिए gg पर कर सकते हैं https://github.com/ehynds/jquery-ui-multise-widget

चयन के लिए यह प्रयोग करें

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

और जब आपके पास json (ajax या किसी भी विधि से) डेटा तैयार हो, तो पहले डेटा को पार्स करें और फिर js ऐरे को असाइन करें

    var js_arr = $.parseJSON(/*data from ajax*/);
    $("#selectBoxId").val(js_arr);
    $("#selectBoxId").multiselect("refresh");

Answer 8

विकल्प मेनू पर चेकबॉक्स सूची के लिए इस कोड का उपयोग करें।

.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>

Comments

dropdown-menuप्रत्येक पंक्ति में चेकबॉक्स तत्वों के साथ निर्माण के इस मूल दृष्टिकोण पर एक पूरी तरह से fleshed उदाहरण के लिए , यहाँ बूटस्ट्रैप ड्रॉपडाउन में चेकबॉक्स लगाने के

— KyleMit

Answer 9

AJAX कॉल के साथ अद्यतन की गई विकल्प सूची से पहले आप मल्टीसेलेक्ट.जेएस फ़ाइल लोड कर रहे होंगे ताकि मल्टीसेलेक्ट.जेएस फ़ाइल का निष्पादन हो जाए, मल्टीसेप्ल फ़ंक्शन को लागू करने के लिए खाली विकल्प सूची है। तो सबसे पहले AJAX कॉल द्वारा विकल्प सूची को अपडेट करें फिर उस मल्टीसेलेक्ट कॉल को आरंभ करें जिसमें आपको डायनामिक विकल्प सूची के साथ ड्रॉपडाउन सूची मिलेगी।

उम्मीद है इससे आपकी सहायता होगी।

मल्टीसेप्ट ड्रॉपडाउन सूची और संबंधित जेएस और सीएसएस फाइलें

// 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>

Answer 10

आप बूटस्ट्रैप-सेलेक्ट कर सकते हैं । इसकी एक लाइव खोज भी है!

Answer 11

यदि आप एक ही पृष्ठ में कई चुनिंदा ड्रॉपडाउन बनाना चाहते हैं:

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

Answer 12

केवल क्लास क्रिएट डिव जोड़ें और क्लास फॉर्म-कंट्रोल जोड़ें। iam JSP, बूस्टराप 4 का उपयोग करें। ध्यान न दें 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>