CODEWITHSUNDEEP
javascriptjqueryhtml
meWantToLearn
meWantToLearn

Reputation: 1700

jquery uncheck parent if current element is check

I have the following html markup

<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/

when user checks admin, and then checks Michael, I want it to uncheck admin.

I am not able to uncheck admin, if user checks Michael

and another example user checks Robert and then checks Steve. So it should uncheck Admin and Robert but keep Steve checked

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

    var c = this.checked;

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

Upvotes: 0

Views: 113

Answers (3)

ctf0
ctf0

Reputation: 7577

EDIT 3

$('.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 );
});
<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>

Upvotes: -1

meWantToLearn
meWantToLearn

Reputation: 1700

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

In one line

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

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388406

You can do something like

//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>

Upvotes: 5

Related Questions