Checkboxes showing checked by default

Question

It is a tree structure with "+" and "-" symbol to indicate whether the item has sub-items or not. It is supposed to work like:

• At first all items with children with "+" symbol
• If the item is selected or say checkbox is checked, the symbol convert to "-"
• If the item is unselected or say checkbox is unchecked, the symbol convert to "+"

How it is working:

• At first all items are unchecked, "+" symbol is there
• On click of any item, the item get unchecked first and remain the "+" symbol
• On click of selected item, the item get checked and change to "-" symbol

JSFIDDLE

$(document).ready(function() {
  var toggle = function() {
    if (($(this).parent().find("input").is(':checked'))) {
      console.log("checked");
      $(this).parent('li:has(>ul)').find("span:first").removeClass("glyphicon glyphicon-plus-sign").addClass("glyphicon glyphicon-minus-sign");
    } else {
      console.log("unchecked");
      $(this).parent('li:has(>ul)').find("span:first").removeClass("glyphicon glyphicon-minus-sign").addClass("glyphicon glyphicon-plus-sign");
    }
    $(this).parent().children().toggle();
    $(this).toggle();
  };
  $(".Collapsable").click(toggle);
  $(".Collapsable").each(toggle);
  $('.tree li:not(:has(>ul))').find("span:first").addClass("glyphicon glyphicon-bookmark");
});

ul.tree,
ul.tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.tree ul {
  margin-left: 0px;
}

ul.tree li {
  margin: 0;
  margin-left: 20px;
  padding: 0 7px;
  line-height: 20px;
  color: #369;
  font-weight: bold;
  border-left: 1px solid rgb(100, 100, 100);
}

ul.tree li:last-child {
  border-left: none;
}

ul.tree li:before {
  position: relative;
  top: -0.3em;
  height: 1em;
  width: 12px;
  color: white;
  border-bottom: 5px solid rgb(100, 100, 100);
  content: "";
  display: inline-block;
  left: -7px;
}

ul.tree li:last-child:before {
  border-left: 1px solid rgb(100, 100, 100);
}

input[type=checkbox] {
  position: absolute;
  margin-top: 4px\9;
  margin-left: -20px;
  visibility: hidden;
}

input[type=checkbox]+label {
  display: initial;
}

input[type=checkbox]:checked+label {
  color: #f00;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <ul class="tree">
      <li>
        <input type="checkbox" name="chkname1" id="chk1">
        <label class="Collapsable" for="chk1">
                  <span></span>
                    One
                </label>
        <ul>
          <li>
            <input type="checkbox" name="chkname1_1" id="chk1_1">
            <label class="Collapsable" for="chk1_1">
                        <span></span>
                        One-1
                        </label>
          </li>
          <li>
            <input type="checkbox" name="chkname1_2" id="chk1_2">
            <label class="Collapsable" for="chk1_2">
                        <span></span>
                        One-2
                        </label>
            <ul>
              <li>
                <input type="checkbox" name="chkname1_1_1" id="chk1_1_1">
                <label class="Collapsable" for="chk1_1_1">
                                <span></span>
                                One-1-1-1
                                </label>
              </li>
              <li>
                <input type="checkbox" name="chkname1_1_2" id="chk1_1_2">
                <label class="Collapsable" for="chk1_1_2">
                                <span></span>
                                One-1-1-2
                                </label>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li><input type="checkbox" name="chkname2" id="chk2">
        <label class="Collapsable" for="chk2">
                <span></span> 
                Two
                </label>
        <ul>
          <li>
            <input type="checkbox" name="chkname2_1" id="chk2_1">
            <label class="Collapsable" for="chk2_1">
                        <span></span>
                        Two-1
                        </label>
            <ul>
              <li>
                <input type="checkbox" name="chkname2_1_1" id="chk2_1_1">
                <label class="Collapsable" for="chk2_1_1">
                                <span></span>Two-1-1</label>
              </li>
              <li>
                <input type="checkbox" name="chkname2_1_2" id="chk2_1_2">
                <label class="Collapsable" for="chk2_1_2">
                                <span></span>Two-1-2</label>
              </li>
            </ul>
          </li>
          <li>
            <input type="checkbox" name="chkname2_2" id="chk2_2">
            <label class="Collapsable" for="chk2_2">
                        <span></span>Two-2</label>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

Why it is showing unchecked on first click? Symbols are changing accordingly.. but incorrect.

Answer 1

can you check this https://jsfiddle.net/jfc8Lqk4/5/

I updated the code by checking the visible state of ul items instead of checking whether the checkbox is checked like

if (!$(this).closest("li").find("ul:first").is(":visible") && $(this).closest("li").is(":visible")) {