代码之家 › 专栏 › 技术社区 › Dipak

jquery如何只检查自己的子元素

each checkbox jquery

Dipak · 技术社区 · 6 年前

我想实现jquery each function 在这里。菜单包含子菜单,如果子菜单在其父菜单被选中时未被选中,则必须停止提交。但在这里 sports 和 vehicle 菜单互相考虑 submenu 像平常一样 子菜单 ,如果另一个人 子菜单 检查过了我试过了 each 函数,因此jquery条件将只应用于自己的子元素,但它不起作用。

$(document).on('submit', '#form', function(e) {
  e.preventDefault();
  if ($("[name='menu[]']:checked").length == 0) {
    alert('Missing menu');
    return false;
  }
  if ($("[name='menu[]']:checked").val() == 2 && $("[name^='submenu']:checked").length == 0) {
    alert('Missing submenu');
    return false;
  }
  if ($("[name='menu[]']:checked").val() == 12 && $("[name^='submenu']:checked").length == 0) {
    alert('Missing submenu');
    return false;
  } else {
    alert('Success');
  }
});

$(document).on('click', '#menu', function() {
  if ($(this).is(':checked')) {
    $(this).parent().find('ul').slideDown('slow');
  } else {
    // these two events
    $(this).parent().find('input[type="checkbox"]').prop('checked', false);
    $(this).parent().find('ul').hide('slow');
  }
});

ul li {
  list-style: none;
  float: left;
}

ul li ul li {
  float: none;
}

.col100 {
  width: 100%;
}

ul li ul {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
  <ul>
    <li><input type="checkbox" name="menu[]" value="2" id="menu">Vehicle
      <ul>
        <li><input type="checkbox" name="submenu[2][1]">Bike</li>
        <li><input type="checkbox" name="submenu[2][2]">Car</li>
        <li><input type="checkbox" name="submenu[2][3]">Cycle</li>
      </ul>
    </li>
    <li><input type="checkbox" name="menu[]" value="12" id="menu">Sport
      <ul>
        <li><input type="checkbox" name="submenu[12][1]">Basketball</li>
        <li><input type="checkbox" name="submenu[12][2]">Volleyball</li>
        <li><input type="checkbox" name="submenu[12][3]">Football</li>
      </ul>
    </li>
  </ul>
  <input type="submit" name="submit" value="submit" class="col100">
</form>

1 回复 | 直到 6 年前

Praveen Kumar Purushothaman Daniel Dewhurst 6 年前

最好实现检查复选框并使主复选框只读的检查条件。

$(function() {
  // Make the main checkboxes readonly.
  $('[name="menu[]"]').click(false);
  $('[name="menu[]"] + ul input').click(function() {
    $(this).closest("ul").prev("input").prop("checked", ($(this).closest("ul").find("input:checked").length > 0));
  });
  $(document).on('submit', '#form', function(e) {
    e.preventDefault();
    if ($("[name='menu[]']:checked").length == 0) {
      alert('Missing menu');
      return false;
    } else {
      alert('Success');
    }
  });
});

ul li {
  list-style: none;
  float: left;
}

ul li ul li {
  float: none;
}

.col100 {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
  <ul>
    <li><input type="checkbox" name="menu[]" value="2" />Vehicle
      <ul>
        <li><input type="checkbox" name="submenu[2][1]">Bike</li>
        <li><input type="checkbox" name="submenu[2][2]">Car</li>
        <li><input type="checkbox" name="submenu[2][3]">Cycle</li>
      </ul>
    </li>
    <li><input type="checkbox" name="menu[]" value="12" />Sport
      <ul>
        <li><input type="checkbox" name="submenu[12][1]">Basketball</li>
        <li><input type="checkbox" name="submenu[12][2]">Volleyball</li>
        <li><input type="checkbox" name="submenu[12][3]">Football</li>
      </ul>
    </li>
  </ul>
  <input type="submit" name="submit" value="submit" class="col100">
</form>

这样,如果不正确勾选方框,就无法提交表单。