Как сделать список для поиска с невыбранным флажком для невидимого div

Question

Как создать список с возможностью поиска с не установленным флажком для невидимого div.

Вопрос 1: Я пытался использовать приведенную ниже программу, но поиск с флажком не работает для внутреннего HTML.

Вопрос 2. Как перенести не отмеченный флажок в конец раздела НЕВИДИМ.

Я прикрепил изображения ниже ...

Пример

function sortCols() {
    var input, filter, ul, li, a, i;
    input = document.getElementById('colsearch');
    filter = input.value.toUpperCase();
    ul = document.getElementById("col-active");
    li = ul.getElementsByTagName('li');

    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
        <div class="col-sm-12">
          <div class="panel panel-default">
            <div class="row">
              <div class="col-sm-12"> <span class="input-icon">
                <input type="text" placeholder="Search" id="colsearch" class="form-control colsearch" onkeyup="sortCols()">
                <i class="fa fa-search"></i> </span>
                <div class="col-sm-12 well">VISIBLE </div>
                <ul id="col-active" class="media-list" style="margin-left: 10px">
                  <li>
                    <a href="#"><div class="checkbox sidebar-content">
                      <label>
                        <input type="checkbox" value="Name" class="green" checked>
                        Name</label>
						</div></a>
                  </li>
                  <li>
                    <a href="#"><div class="checkbox sidebar-content">
                      <label>
                        <input type="checkbox" class="green" value="ProductCode" checked>
                        Product Code</label>
						</div></a>
                  </li>
                  <li>
                    <a href="#"><div class="checkbox sidebar-content">
                      <label>
                        <input type="checkbox" class="green" value="Active" checked>
                        Active </label>
						</div></a>
                  </li>
                  <li>
                   <a href="#"> <div class="checkbox sidebar-content">
                      <label>
                        <input type="checkbox" value="ID" class="green" checked>
						  ID </label></a>
                    </div>
                  </li>
                  <li>
                    <a href="#"><div class="checkbox sidebar-content">
                      <label>
                        <input type="checkbox" value="Our Contact" class="green" checked>
                        Our Contact </label>
						</div></a>
                  </li>
                  <li>
                   <a href="#"> <div class="checkbox sidebar-content">
                      <label>
                        <input type="checkbox" value="PriceUSD" class="green" checked>
                        Price USD </label>
					   </div></a>
                  </li>
                  <li>
                   <a href="#"> <div class="checkbox sidebar-content">
                      <label>
                        <input type="checkbox" value="Our Contact" class="green" checked>
                        Our Contact </label>
					   </div></a>
                  </li>
                  <li>
                    <a href="#"><div class="checkbox sidebar-content">
                      <label>
                        <input type="checkbox" value="Tax" class="green" checked>
                        Tax </label>
						</div></a>
                  </li>
                  <li>
                   <a href="#"> <div class="checkbox sidebar-content">
                      <label>
                        <input type="checkbox" value="Unit" class="green" checked>
                        Unit </label>
					   </div></a>
                  </li>
                  <li>
                    <div class="checkbox sidebar-content">
                      <label>
                        <input type="checkbox" value="VisibleTo" class="green" checked>
                        Visible to </label>
                    </div>
                  </li>
                </ul>
                <div class="col-sm-12 well">INVISIBLE </div>
                <ul id="col-inactive" class="media-list"  style="margin-left: 10px">
                  <li>
                    <div class="checkbox sidebar-content">
                      <label>
                        <input type="checkbox" value="Name" class="green" checked>
                        Name</label>
                    </div>
                  </li>
                </ul>
              </div>
				<div class="col-sm-12"> 
           	<div class="btn-group floatright space10" style="margin-right: 10px;"> 
				<a class="btn btn-default btn-xm sb-toggle" href="#toggleColumns">Cancel</a>           
         		 <a class="btn btn-success btn-xm" href="#">Save</a>    
         		  </div>       
           </div>
            </div>
          </div>
        </div>
      </div>

Answer 1

Чтобы переместить не отмеченный флажок в конец раздела НЕВИДИМЫ, вы можете прослушать событие изменения для каждого флажка, и в соответствии с его состоянием вы можете переместить элемент в первой части или во второй части:

$(':checkbox').on('change', function(e) {
    if (this.checked == false && $(this).closest('#col-active').length == 1) {
        $(this).closest('li').appendTo('#col-inactive');
    }
    if (this.checked == true && $(this).closest('#col-inactive').length == 1) {
        $(this).closest('li').appendTo('#col-active');
    }
})

function sortCols() {
    var input, filter, ul, li, a, i;
    input = document.getElementById('colsearch');
    filter = input.value.toUpperCase();
    ul = document.getElementById("col-active");
    li = ul.getElementsByTagName('li');

    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("label")[0];
        if (a.textContent.trim().toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

$(':checkbox').on('change', function(e) {
    if (this.checked == false && $(this).closest('#col-active').length == 1) {
        $(this).closest('li').appendTo('#col-inactive');
    }
    if (this.checked == true && $(this).closest('#col-inactive').length == 1) {
        $(this).closest('li').appendTo('#col-active');
    }
})

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
    <div class="col-sm-4">
        <div class="panel panel-default">
            <div class="row">
                <div class="col-sm-12"> <span class="input-icon">
                <input type="text" placeholder="Search" id="colsearch" class="form-control colsearch" onkeyup="sortCols()">
                <i class="fa fa-search"></i> </span>
                    <div class="col-sm-12 well">VISIBLE </div>
                    <ul id="col-active" class="media-list" style="margin-left: 10px">
                        <li>
                            <div class="checkbox sidebar-content">
                                <label>
                                    <input type="checkbox" value="Name" class="green" checked>
                                    Name</label>
                            </div>
                        </li>
                        <li>
                            <div class="checkbox sidebar-content">
                                <label>
                                    <input type="checkbox" class="green" value="ProductCode" checked>
                                    Product Code</label>
                            </div>
                        </li>
                        <li>
                            <div class="checkbox sidebar-content">
                                <label>
                                    <input type="checkbox" class="green" value="Active" checked>
                                    Active </label>
                            </div>
                        </li>
                        <li>
                            <div class="checkbox sidebar-content">
                                <label>
                                    <input type="checkbox" value="ID" class="green" checked>
                                    ID </label>
                            </div>
                        </li>
                        <li>
                            <div class="checkbox sidebar-content">
                                <label>
                                    <input type="checkbox" value="Our Contact" class="green" checked>
                                    Our Contact </label>
                            </div>
                        </li>
                        <li>
                            <div class="checkbox sidebar-content">
                                <label>
                                    <input type="checkbox" value="PriceUSD" class="green" checked>
                                    Price USD </label>
                            </div>
                        </li>
                        <li>
                            <div class="checkbox sidebar-content">
                                <label>
                                    <input type="checkbox" value="Our Contact" class="green" checked>
                                    Our Contact </label>
                            </div>
                        </li>
                        <li>
                            <div class="checkbox sidebar-content">
                                <label>
                                    <input type="checkbox" value="Tax" class="green" checked>
                                    Tax </label>
                            </div>
                        </li>
                        <li>
                            <div class="checkbox sidebar-content">
                                <label>
                                    <input type="checkbox" value="Unit" class="green" checked>
                                    Unit </label>
                            </div>
                        </li>
                        <li>
                            <div class="checkbox sidebar-content">
                                <label>
                                    <input type="checkbox" value="VisibleTo" class="green" checked>
                                    Visible to </label>
                            </div>
                        </li>
                    </ul>
                    <div class="col-sm-12 well">INVISIBLE </div>
                    <ul id="col-inactive" class="media-list"  style="margin-left: 10px">
                        <li>
                            <div class="checkbox sidebar-content">
                                <label>
                                    <input type="checkbox" value="Name" class="green" checked>
                                    Name</label>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>