check box Multi Select

[santhi2]

Hi ,

How do create checkbox like this 

[rahulpandey]

Hi,

Below is HTML+CSS+JS code for similar nested checkbox

HTML

 <div class="container">
  <ul>
    <li>
      <input type="checkbox" id="option"><label for="option"> Electronics</label>
      <ul>
        <li><label><input type="checkbox" class="subOption"> Laptops</label></li>
        <li><label><input type="checkbox" class="subOption"> TVs</label></li>
        <li><label><input type="checkbox" class="subOption"> Microphones</label></li>
      </ul>
    </li>
  </ul>
</div>

CSS

body {
  color: #555;
  font-size: 1.25em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

hr {
  margin: 50px 0;
}

ul {
  list-style: none;
}

.container {
  margin: 40px auto;
  max-width: 700px;
}

li {
  margin-top: 1em;
}

label {
  font-weight: bold;
}

JS

var checkboxes = document.querySelectorAll('input.subOption'),
    checkall = document.getElementById('option');

for(var i=0; i<checkboxes.length; i++) {
  checkboxes[i].onclick = function() {
    var checkedCount = document.querySelectorAll('input.subOption:checked').length;

    checkall.checked = checkedCount > 0;
    checkall.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
  }
}

checkall.onclick = function() {
  for(var i=0; i<checkboxes.length; i++) {
    checkboxes[i].checked = this.checked;
  }
}

[santhi2]

Hi Rahul,

thanks for ur reply..we dnt need portal..we need in catalog item (itil) 

[rahulpandey]

Hi,

what challenge you are facing to implement this in Jelly ?

Create a UI macro and put code as it. You may need to do adjustment like below

HTML

<input type="checkbox" id="option">

Xhtml/Jelly (You need to close any tag you have opened)

<input type="checkbox" id="option" />

If you want to fill data from a table then, follow below example 

<g:evaluate var="jvar_gr" object="true">
   var gr = new GlideRecord("incident");
   gr.addQuery("active", true);
   gr.query();
   gr;
</g:evaluate>
 
<j:while test="${jvar_gr.next()}">
 <input type="checkbox" id="option"><label for="option"> ${jvar_gr.getValue('number')}</label>
</j:while>

Refer https://docs.servicenow.com/bundle/kingston-application-development/page/script/general-scripting/reference/r_JellyTags.html
CSS can be accommodated in <style></style> tag.

[rahulpandey]

Hi did this help ?

If yes, kindly mark the question answered 🙂