Question

我有以下html标记

<ul>
    <li><label><input class="user" name="profiles[]" type="checkbox" value="1">Smith</label></li>
    <li><label><input class="user" name="profiles[]" type="checkbox"  value="2">Emma</label></li>
    <li><label><input class="user" name="profiles[]" type="checkbox"  value="3">Peter</label></li>
    <li>
        <span><input class="user" name="profiles[]"  type="checkbox" value="admin"></span><a href="#">Admins<i class="fa fa- caret-down"></i></a>           
        <ul class="" style="display:  block;"> 
            <li><label><input class="user" name="profiles[]" type="checkbox" value="michael">Michael</label></li>
            <li><label><input class="user" name="profiles[]" type="checkbox" value="ashley">Ashley</label></li>
            <li>
        <span><input class="user" name="profiles[]"  type="checkbox" value="robert"></span><a href="#">Robert<i class="fa fa- caret-down"></i></a>

               <ul class="" style="display:  block;"> 
      <li><label><input class="user"  name="profiles[]" type="checkbox" value="steve">Steve</label></li>
      <li><label><input class="user" name="profiles[]" type="checkbox" value="jennifer">Jennifer</label></li>
       <li><label><input class="user" name="profiles[]" type="checkbox" value="rock">Rock</label>
           </ul>

        </li>

       <li><label><input class="user" name="profiles[]" type="checkbox" value="jack">Jack</label></li>
        </ul>
    </li>
</ul>

http://jsfiddle.net/ckoe9q3L/5/

当用户检查管理员，然后检查迈克尔时，我希望它取消选中管理员。

如果用户检查Michael

，我无法取消选中管理员

另一个示例用户检查罗伯特，然后检查史蒂夫。所以它应该取消选中Admin和Robert，但保持Steve检查

$('.user').change(function() {

    var c = this.checked;

    if (c) {
        $(this).parent().find(':checkbox').prop('checked', false);
    }
}

Answer 1

您可以执行类似

的操作

//target only checkboxes in the second level
$('li ul input.user').change(function() {
  $(this).closest('ul').siblings('span').find('input').prop('checked', false)
});
//if want to uncheck Michael when Admins is clicked
$('li:has(ul) > span input.user').change(function() {
  $(this).parent().siblings('ul').find('input').prop('checked', false)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>
    <label>
      <input class="user" name="profiles[]" type="checkbox" value="1" />Smith</label>
  </li>
  <li>
    <label>
      <input class="user" name="profiles[]" type="checkbox" value="2" />Emma</label>
  </li>
  <li>
    <label>
      <input class="user" name="profiles[]" type="checkbox" value="3" />Peter</label>
  </li>

  <li><span><input class="user" name="profiles[]"  type="checkbox" value="admin"/></span><a href="#">Admins<i class="fa fa- caret-down"></i></a> 
    <ul class="" style="display:  block;">
      <li>
        <label>
          <input class="user" name="profiles[]" type="checkbox" value="michael" />Michael</label>
      </li>
      <li>
        <label>
          <input class="user" name="profiles[]" type="checkbox" value="ashley" />Ashley</label>
      </li>
      <li>
        <label>
          <input class="user" name="profiles[]" type="checkbox" value="robert" />Robert</label>
      </li>
      <li>
        <label>
          <input class="user" name="profiles[]" type="checkbox" value="jack" />Jack</label>
      </li>
    </ul>
  </li>
</ul>

Answer 2

http://jsfiddle.net/ckoe9q3L/7/

在一行

  $(this).parents().siblings('span').find(':checkbox').prop('checked', false);

Answer 3

编辑3

＆＃13;

$('.admins').change(function() {
    if (this.checked) {
        $(this).parents().siblings('ul').find('input:checkbox').prop( "checked", !this.checked );
    }
});

$('.user').change(function() {
    $(this).parents().siblings('span').find('input:checked').prop( "checked", !this.checked );
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul>
	<li><label><input class="user" name="profiles[]" type="checkbox" value="1">Smith</label></li>
	<li><label><input class="user" name="profiles[]" type="checkbox"  value="2">Emma</label></li>
	<li><label><input class="user" name="profiles[]" type="checkbox"  value="3">Peter</label></li>
	<li>
		<span>
			<input class="admins" name="profiles[]" type="checkbox" value="admin">
			<a href="#">Admins<i class="fa fa-caret-down"></i></a>
		</span>
		<ul style="display: block;"> 
			<li><label><input class="user" name="profiles[]" type="checkbox" value="michael">Michael</label></li>
			<li><label><input class="user" name="profiles[]" type="checkbox" value="ashley">Ashley</label></li>
			<li>
				<span>
					<input class="admins" name="profiles[]" type="checkbox" value="robert">
					<a href="#">Robert<i class="fa fa-caret-down"></i></a>
				</span>
				<ul style="display: block;"> 
					<li><label><input class="user" name="profiles[]" type="checkbox" value="steve">Steve</label></li>
					<li><label><input class="user" name="profiles[]" type="checkbox" value="jennifer">Jennifer</label></li>
					<li><label><input class="user" name="profiles[]" type="checkbox" value="rocky">Rock</label></li>
				</ul>
			</li>
			<li><label><input class="user" name="profiles[]" type="checkbox" value="jack">Jack</label></li>
		</ul>
	</li>
</ul>

＆＃13;

如果检查当前元素，则jquery取消选中parent

3 个答案: