如何在jQuery中删除未经检查的复选框父元素

时间：2016-09-19 13:18:57

标签： jquery

My Fiddle

我需要删除未选中的复选框项。我不知道我哪里出错了。有些项目只删除了我不知道为什么？

$(document).ready(function(){
  $('#remove').click(function(){

  var classlength = $('.showdropdowninv').find('.classname').length;
  for(var i=0;i< classlength; i++){
    if($('.showdropdowninv').find(".classname").eq(i).attr('checked') == true){
    } else {
      $('.showdropdowninv').find(".classname").eq(i).closest('li').remove();
    } //else close
  }
 });
});

只需勾选一些复选框，然后点击删除链接即可。

5 个答案:

答案 0 :(得分：2)

使用$("input.classname:checkbox:not(:checked)").each(function(){点击删除所有未选中的具有“classname”类的未选中复选框的链接循环，并使用$(this).parent().remove();删除其父级。

请查看以下代码段以获取更多理解。

$(document).ready(function(){
  $('#remove').click(function(){
    $("input.classname:checkbox:not(:checked)").each(function(){
      $(this).parent().remove();
    });
  });
});
.hide {
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="showdropdowninv" style="display: block;">
  <li><input type="checkbox" value="1" class="selectall"> Select All </li>

  <li class="togglelihere"><input type="checkbox" value="1" class="classname" id="idflesd"> System Name
    <form class="hide">
      <input type="hidden" name="filter" value="SYSTEM_NAME">
      <select name="op" class="xsmall">
        <option value="equal">=</option>
        <option value="notEqual">!=</option>
      </select>
      <input type="text" class="small" name="val">
    </form></li><li class="togglelihere"><input type="checkbox" value="1" class="classname" id="idflesd"> Version Consistency
  <form class="hide">
    <input type="hidden" name="filter" value="VERSION">
    <select name="op" class="xsmall">
      <option value="equal">=</option>
      <option value="notEqual">!=</option>
    </select>
    <input type="text" class="small" name="val">
  </form></li><li class="togglelihere"><input type="checkbox" value="1" class="classname" id="idflesd"> Patch Level Consistency
  <form class="hide">
    <input type="hidden" name="filter" value="PATCH">
    <select name="op" class="xsmall">
      <option value="equal">=</option>
      <option value="notEqual">!=</option>
    </select>
    <input type="text" class="small" name="val">
  </form></li><li class="togglelihere"><input type="checkbox" value="1" class="classname" id="idflesd"> Recovery Mode Consitency
  <form class="hide">
    <input type="hidden" name="filter" value="RECOVERY_MODE_CONSITENCY">
    <select name="op" class="xsmall">
      <option value="equal">=</option>
      <option value="notEqual">!=</option>
    </select>
    <input type="text" class="small" name="val">
  </form></li><li class="togglelihere"><input type="checkbox" value="1" class="classname" id="idflesd"> Maintenance Plans
  <form class="hide">
    <input type="hidden" name="filter" value="MAINTENANCE_PLANS">
    <select name="op" class="xsmall">
      <option value="equal">=</option>
      <option value="notEqual">!=</option>
    </select>
    <input type="text" class="small" name="val">
  </form></li><li class="togglelihere"><input type="checkbox" value="1" class="classname" id="idflesd"> Permissions &amp; Security Consistency
  <form class="hide">
    <input type="hidden" name="filter" value="SECURITY">
    <select name="op" class="xsmall">
      <option value="equal">=</option>
      <option value="notEqual">!=</option>
    </select>
    <input type="text" class="small" name="val">
  </form></li><li class="togglelihere"><input type="checkbox" value="1" class="classname" id="idflesd"> Tuning or Parameter Alignment
  <form class="hide">
    <input type="hidden" name="filter" value="TUNING">
    <select name="op" class="xsmall">
      <option value="equal">=</option>
      <option value="notEqual">!=</option>
    </select>
    <input type="text" class="small" name="val">
  </form></li><li class="togglelihere"><input type="checkbox" value="1" class="classname" id="idflesd"> Monitoring Agents
  <form class="hide">
    <input type="hidden" name="filter" value="MONITORING_AGENTS">
    <select name="op" class="xsmall">
      <option value="equal">=</option>
      <option value="notEqual">!=</option>
    </select>
    <input type="text" class="small" name="val">
  </form></li>                </ul>


<a href="javascript:;" id="remove">Remove selected</a>

答案 1 :(得分：1)

使用$('input[type="checkbox"]').each(function(i, v){}循环显示所有复选框。使用$(v).prop('checked')检查选中的复选框，然后找到他们的父级并使用$(this).parent().remove();

删除它们 

$(document).ready(function(){
  $('#remove').click(function(){
  $('input[type="checkbox"]').each(function(i, v){
  
  	if(!$(v).prop('checked')) {
    	$(this).parent().remove();
    }
  })
  });
});
.hide {
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="showdropdowninv" style="display: block;">
                  <li><input type="checkbox" value="1" class="selectall"> Select All </li>
				  
				  <li class="togglelihere"><input type="checkbox" value="1" class="classname" id="idflesd"> System Name
                        <form class="hide">
                        <input type="hidden" name="filter" value="SYSTEM_NAME">
                        <select name="op" class="xsmall">
                        <option value="equal">=</option>
                        <option value="notEqual">!=</option>
                        </select>
                        <input type="text" class="small" name="val">
			</form></li><li class="togglelihere"><input type="checkbox" value="1" class="classname" id="idflesd"> Version Consistency
                        <form class="hide">
                        <input type="hidden" name="filter" value="VERSION">
                        <select name="op" class="xsmall">
                        <option value="equal">=</option>
                        <option value="notEqual">!=</option>
                        </select>
                        <input type="text" class="small" name="val">
			</form></li><li class="togglelihere"><input type="checkbox" value="1" class="classname" id="idflesd"> Patch Level Consistency
                        <form class="hide">
                        <input type="hidden" name="filter" value="PATCH">
                        <select name="op" class="xsmall">
                        <option value="equal">=</option>
                        <option value="notEqual">!=</option>
                        </select>
                        <input type="text" class="small" name="val">
			</form></li><li class="togglelihere"><input type="checkbox" value="1" class="classname" id="idflesd"> Recovery Mode Consitency
                        <form class="hide">
                        <input type="hidden" name="filter" value="RECOVERY_MODE_CONSITENCY">
                        <select name="op" class="xsmall">
                        <option value="equal">=</option>
                        <option value="notEqual">!=</option>
                        </select>
                        <input type="text" class="small" name="val">
			</form></li><li class="togglelihere"><input type="checkbox" value="1" class="classname" id="idflesd"> Maintenance Plans
                        <form class="hide">
                        <input type="hidden" name="filter" value="MAINTENANCE_PLANS">
                        <select name="op" class="xsmall">
                        <option value="equal">=</option>
                        <option value="notEqual">!=</option>
                        </select>
                        <input type="text" class="small" name="val">
			</form></li><li class="togglelihere"><input type="checkbox" value="1" class="classname" id="idflesd"> Permissions &amp; Security Consistency
                        <form class="hide">
                        <input type="hidden" name="filter" value="SECURITY">
                        <select name="op" class="xsmall">
                        <option value="equal">=</option>
                        <option value="notEqual">!=</option>
                        </select>
                        <input type="text" class="small" name="val">
			</form></li><li class="togglelihere"><input type="checkbox" value="1" class="classname" id="idflesd"> Tuning or Parameter Alignment
                        <form class="hide">
                        <input type="hidden" name="filter" value="TUNING">
                        <select name="op" class="xsmall">
                        <option value="equal">=</option>
                        <option value="notEqual">!=</option>
                        </select>
                        <input type="text" class="small" name="val">
			</form></li><li class="togglelihere"><input type="checkbox" value="1" class="classname" id="idflesd"> Monitoring Agents
                        <form class="hide">
                        <input type="hidden" name="filter" value="MONITORING_AGENTS">
                        <select name="op" class="xsmall">
                        <option value="equal">=</option>
                        <option value="notEqual">!=</option>
                        </select>
                        <input type="text" class="small" name="val">
			</form></li>                </ul>
      
      
      <a href="javascript:;" id="remove">Remove selected</a>

答案 2 :(得分：0)

循环遍历classname类，然后删除没有属性checked

的元素

＆＃13;
＆＃13; 
$(document).ready(function() {
  $('#remove').click(function() {
    $('.classname').each(function() {
      if ($(this).prop('checked') == false) {
        $(this).parent().remove();
      }
    });
  });
});
＆＃13; 
.hide {
  display: none;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="showdropdowninv" style="display: block;">
  <li>
    <input type="checkbox" value="1" class="selectall"> Select All </li>

  <li class="togglelihere">
    <input type="checkbox" value="1" class="classname" id="idflesd"> System Name
    <form class="hide">
      <input type="hidden" name="filter" value="SYSTEM_NAME">
      <select name="op" class="xsmall">
        <option value="equal">=</option>
        <option value="notEqual">!=</option>
      </select>
      <input type="text" class="small" name="val">
    </form>
  </li>
  <li class="togglelihere">
    <input type="checkbox" value="1" class="classname" id="idflesd"> Version Consistency
    <form class="hide">
      <input type="hidden" name="filter" value="VERSION">
      <select name="op" class="xsmall">
        <option value="equal">=</option>
        <option value="notEqual">!=</option>
      </select>
      <input type="text" class="small" name="val">
    </form>
  </li>
  <li class="togglelihere">
    <input type="checkbox" value="1" class="classname" id="idflesd"> Patch Level Consistency
    <form class="hide">
      <input type="hidden" name="filter" value="PATCH">
      <select name="op" class="xsmall">
        <option value="equal">=</option>
        <option value="notEqual">!=</option>
      </select>
      <input type="text" class="small" name="val">
    </form>
  </li>
  <li class="togglelihere">
    <input type="checkbox" value="1" class="classname" id="idflesd"> Recovery Mode Consitency
    <form class="hide">
      <input type="hidden" name="filter" value="RECOVERY_MODE_CONSITENCY">
      <select name="op" class="xsmall">
        <option value="equal">=</option>
        <option value="notEqual">!=</option>
      </select>
      <input type="text" class="small" name="val">
    </form>
  </li>
  <li class="togglelihere">
    <input type="checkbox" value="1" class="classname" id="idflesd"> Maintenance Plans
    <form class="hide">
      <input type="hidden" name="filter" value="MAINTENANCE_PLANS">
      <select name="op" class="xsmall">
        <option value="equal">=</option>
        <option value="notEqual">!=</option>
      </select>
      <input type="text" class="small" name="val">
    </form>
  </li>
  <li class="togglelihere">
    <input type="checkbox" value="1" class="classname" id="idflesd"> Permissions &amp; Security Consistency
    <form class="hide">
      <input type="hidden" name="filter" value="SECURITY">
      <select name="op" class="xsmall">
        <option value="equal">=</option>
        <option value="notEqual">!=</option>
      </select>
      <input type="text" class="small" name="val">
    </form>
  </li>
  <li class="togglelihere">
    <input type="checkbox" value="1" class="classname" id="idflesd"> Tuning or Parameter Alignment
    <form class="hide">
      <input type="hidden" name="filter" value="TUNING">
      <select name="op" class="xsmall">
        <option value="equal">=</option>
        <option value="notEqual">!=</option>
      </select>
      <input type="text" class="small" name="val">
    </form>
  </li>
  <li class="togglelihere">
    <input type="checkbox" value="1" class="classname" id="idflesd"> Monitoring Agents
    <form class="hide">
      <input type="hidden" name="filter" value="MONITORING_AGENTS">
      <select name="op" class="xsmall">
        <option value="equal">=</option>
        <option value="notEqual">!=</option>
      </select>
      <input type="text" class="small" name="val">
    </form>
  </li>
</ul>


<a href="javascript:;" id="remove">Remove selected</a>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

//Remove items which are unchekced  
$('input[type="checkbox"].classname')
    .not(":checked")
    .parent('li')
    .remove(); 

//To remove checked items only
$('input[type="checkbox"].classname:checked')
    .parent('li')
    .remove();

试试这个代码段。

我不认为每个循环都需要实现相同的目标。

$(document).ready(function(){
  $('#remove').click(function(){
    //Remove items which are unchecked
    $('input[type="checkbox"].classname')
      .not(":checked")
      .parent('li')
      .remove(); 
  });
  //Check all functionality
  $('.selectall').click(function(){
    $('input[type="checkbox"].classname')
        .prop('checked', $(this).is(":checked"));
  });
});

//To remove checked items only
//$('input[type="checkbox"].classname:checked').parent('li').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="showdropdowninv" style="display: block;">
                  <li><input type="checkbox" value="1" class="selectall"> Select All </li>
				  
				  <li class="togglelihere"><input type="checkbox" value="1" class="classname" id="idflesd"> System Name
                        <form class="hide">
                        <input type="hidden" name="filter" value="SYSTEM_NAME">
                        <select name="op" class="xsmall">
                        <option value="equal">=</option>
                        <option value="notEqual">!=</option>
                        </select>
                        <input type="text" class="small" name="val">
			</form></li><li class="togglelihere"><input type="checkbox" value="1" class="classname" id="idflesd"> Version Consistency
                        <form class="hide">
                        <input type="hidden" name="filter" value="VERSION">
                        <select name="op" class="xsmall">
                        <option value="equal">=</option>
                        <option value="notEqual">!=</option>
                        </select>
                        <input type="text" class="small" name="val">
			</form></li><li class="togglelihere"><input type="checkbox" value="1" class="classname" id="idflesd"> Patch Level Consistency
                        <form class="hide">
                        <input type="hidden" name="filter" value="PATCH">
                        <select name="op" class="xsmall">
                        <option value="equal">=</option>
                        <option value="notEqual">!=</option>
                        </select>
                        <input type="text" class="small" name="val">
			</form></li><li class="togglelihere"><input type="checkbox" value="1" class="classname" id="idflesd"> Recovery Mode Consitency
                        <form class="hide">
                        <input type="hidden" name="filter" value="RECOVERY_MODE_CONSITENCY">
                        <select name="op" class="xsmall">
                        <option value="equal">=</option>
                        <option value="notEqual">!=</option>
                        </select>
                        <input type="text" class="small" name="val">
			</form></li><li class="togglelihere"><input type="checkbox" value="1" class="classname" id="idflesd"> Maintenance Plans
                        <form class="hide">
                        <input type="hidden" name="filter" value="MAINTENANCE_PLANS">
                        <select name="op" class="xsmall">
                        <option value="equal">=</option>
                        <option value="notEqual">!=</option>
                        </select>
                        <input type="text" class="small" name="val">
			</form></li><li class="togglelihere"><input type="checkbox" value="1" class="classname" id="idflesd"> Permissions &amp; Security Consistency
                        <form class="hide">
                        <input type="hidden" name="filter" value="SECURITY">
                        <select name="op" class="xsmall">
                        <option value="equal">=</option>
                        <option value="notEqual">!=</option>
                        </select>
                        <input type="text" class="small" name="val">
			</form></li><li class="togglelihere"><input type="checkbox" value="1" class="classname" id="idflesd"> Tuning or Parameter Alignment
                        <form class="hide">
                        <input type="hidden" name="filter" value="TUNING">
                        <select name="op" class="xsmall">
                        <option value="equal">=</option>
                        <option value="notEqual">!=</option>
                        </select>
                        <input type="text" class="small" name="val">
			</form></li><li class="togglelihere"><input type="checkbox" value="1" class="classname" id="idflesd"> Monitoring Agents
                        <form class="hide">
                        <input type="hidden" name="filter" value="MONITORING_AGENTS">
                        <select name="op" class="xsmall">
                        <option value="equal">=</option>
                        <option value="notEqual">!=</option>
                        </select>
                        <input type="text" class="small" name="val">
			</form></li>                </ul>
      
      
      <a href="javascript:;" id="remove">Remove selected</a>

答案 4 :(得分：0)

您可以使用has和not选择器

来执行此操作 
$("li:has(:checkbox:not(:checked))").remove()
相关问题
最新问题