單選按鈕組包含復選框組

Question

我試圖列出包含一組復選框的單選按鈕，而這些按鈕又包含另一組復選框：

當我使用一個單選按鈕時，我的代碼工作正常。 如果我選擇另一個JS，則會返回一些奇怪的消息，並且我不知道如何解決它。

這是我的代碼：

HTML

  <ul>
    <li class="radio">
      <input type="radio" name="level-1">submenu1.1
      <ul>
        <li>
          <input type="checkbox" name="level-2">submenu1.1.1
          <ul>
            <li><input type="checkbox" name="level-3">submenu1.1.1.1</li>
            <li><input type="checkbox" name="level-3">submenu1.1.1.2</li>
            <li><input type="checkbox" name="level-3">submenu1.1.1.3</li>
          </ul>
        </li>
        <li>
          <input type="checkbox" name="level-2">submenu1.1.2
          <ul>
            <li><input type="checkbox" name="level-3">submenu1.1.2.1</li>
            <li><input type="checkbox" name="level-3">submenu1.1.2.2</li>
            <li><input type="checkbox" name="level-3">submenu1.1.2.3</li>
          </ul>
        </li>
        <li>
          <input type="checkbox" name="level-2">submenu1.1.3
          <ul>
            <li><input type="checkbox" name="level-3">submenu1.1.3.1</li>
            <li><input type="checkbox" name="level-3">submenu1.1.3.2</li>
            <li><input type="checkbox" name="level-3">submenu1.1.3.3</li>
          </ul>
        </li>
        <li>
          <input type="checkbox" name="level-2">submenu1.1.4
          <ul>
            <li><input type="checkbox" name="level-3">submenu1.1.4.1</li>
            <li><input type="checkbox" name="level-3">submenu1.1.4.2</li>
            <li><input type="checkbox" name="level-3">submenu1.1.4.3</li>
          </ul>
        </li>
      </ul>
    </li>

    <br>

    <li class="radio">
      <input type="radio" name="level-1" value="submenu">submenu1.2
      <ul>
        <li>
          <input type="checkbox" name="level-2">submenu1.2.1
          <ul>
            <li><input type="checkbox" name="level-3">submenu1.2.1.1</li>
            <li><input type="checkbox" name="level-3">submenu1.2.1.2</li>
            <li><input type="checkbox" name="level-3">submenu1.2.1.3</li>
          </ul>
        </li>
        <li>
          <input type="checkbox" name="level-2">submenu1.2.2
          <ul>
            <li><input type="checkbox" name="level-3">submenu1.2.2.1</li>
            <li><input type="checkbox" name="level-3">submenu1.2.2.2</li>
            <li><input type="checkbox" name="level-3">submenu1.2.2.3</li>
          </ul>
        </li>
        <li>
          <input type="checkbox" name="level-2">submenu1.2.3
          <ul>
            <li><input type="checkbox" name="level-3">submenu1.2.3.1</li>
            <li><input type="checkbox" name="level-3">submenu1.2.3.2</li>
            <li><input type="checkbox" name="level-3">submenu1.2.3.3</li>
          </ul>
        </li>
        <li>
          <input type="checkbox" name="level-2">submenu1.2.4
          <ul>
            <li><input type="checkbox" name="level-3">submenu1.2.4.1</li>
            <li><input type="checkbox" name="level-3">submenu1.2.4.2</li>
            <li><input type="checkbox" name="level-3">submenu1.2.4.3</li>
          </ul>
        </li>
      </ul>
    </li>

    <br>

    <li class="radio">
      <input type="radio" name="level-1">submenu1.3
      <ul>
        <li>
          <input type="checkbox" name="level-2">submenu1.3.1
          <ul>
            <li><input type="checkbox" name="level-3" value="submenu">submenu1.3.1.1</li>
            <li><input type="checkbox" name="level-3" value="submenu">submenu1.3.1.2</li>
            <li><input type="checkbox" name="level-3" value="submenu">submenu1.3.1.3</li>
          </ul>
        </li>
        <li>
          <input type="checkbox" name="level-2">submenu1.3.2
          <ul>
            <li><input type="checkbox" name="level-3" value="submenu">submenu1.3.2.1</li>
            <li><input type="checkbox" name="level-3" value="submenu">submenu1.3.2.2</li>
            <li><input type="checkbox" name="level-3" value="submenu">submenu1.3.2.3</li>
          </ul>
        </li>
        <li>
          <input type="checkbox" name="level-2">submenu1.3.3
          <ul>
            <li><input type="checkbox" name="level-3" value="submenu">submenu1.3.3.1</li>
            <li><input type="checkbox" name="level-3" value="submenu">submenu1.3.3.2</li>
            <li><input type="checkbox" name="level-3" value="submenu">submenu1.3.3.3</li>
          </ul>
        </li>
        <li>
          <input type="checkbox" name="level-2">submenu1.3.4
          <ul>
            <li><input type="checkbox" name="level-3" value="submenu">submenu1.3.4.1</li>
            <li><input type="checkbox" name="level-3" value="submenu">submenu1.3.4.2</li>
            <li><input type="checkbox" name="level-3" value="submenu">submenu1.3.4.3</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

JS

$(document).ready(function() {
  $("li:not(.radio)").hide();
  $("input[name='level-1']").change(function() {
    console.log(this);
    $("li:not(.radio)").hide();
    var $val = $(this).next("ul").children("li");
    $val.slideToggle("fast");
    $val.next("ul").children("li").hide();

    $("input[type=checkbox][name='level-2']").click(function (event) {
      $(this).next("ul").children("li").slideToggle("fast");
      var checked = $(this).is(':checked');
      if (!checked) {
        $(this).parent().find("input[type=checkbox][name='level-3']").prop("checked", false);
      }
    });
  });
});

http://jsfiddle.net/benatespina/Et95z/

Answer 1

發生這種情況的原因是您在1 level-2更改事件內觸發了level-2 level-1更改事件。

分別編寫它們。

寫：

  $("li:not(.radio)").hide();
  $("input[name='level-1']").change(function () {
      console.log(this);
      $("li:not(.radio)").hide();
      var $val = $(this).next("ul").children("li");
      $val.slideToggle("fast");
      $val.next("ul").children("li").hide();
      $("input[type=checkbox][name='level-2']:checked").removeAttr("checked");
  });
  $("input[type=checkbox][name='level-2']").change(function (event) {
      $(this).next("ul").find("li").slideToggle("fast");
      var checked = $(this).is(':checked');
      if (!checked) {
          $(this).parent().find("input[type=checkbox][name='level-3']").prop("checked", false);
      }
  });

在這里更新了小提琴。