> 웹 프론트엔드 > JS 튜토리얼 > jquery를 사용하여 모두 선택하고 삭제하는 방법

jquery를 사용하여 모두 선택하고 삭제하는 방법

藏色散人
풀어 주다: 2021-02-05 18:00:32
원래의
2000명이 탐색했습니다.

jquery를 사용하여 모두 선택하고 삭제하는 방법: 먼저 html 코드 샘플 파일을 만든 다음 jquery 코드를 수정합니다. 마지막으로 "$(".seleAll").on("click", function(){... }" 방법은 모두 삭제 기능을 구현하는 것입니다.

jquery를 사용하여 모두 선택하고 삭제하는 방법

본 튜토리얼의 운영 환경: Windows7 시스템, jquery1.10.0 버전, Dell G3 컴퓨터

권장 사항: "jquery 비디오 튜토리얼"

jquery를 사용하여 삭제 기능

html code

<div class="box">
<ul>
<li><input type="checkbox" /> 少小离家胖了回</li>
<li><input type="checkbox" /> 乡音无改肉成堆</li>
<li><input type="checkbox" /> 儿童相见不相识</li>
<li><input type="checkbox" /> 笑问胖子你是谁</li>
</ul>
<div>
<input type="button" class="seleAll" value="全选" />
<input type="button" class="reverse" value="反选" />
<input type="button" class="op" value="全不选" />
<input type="button" class="del" value="删除" />
</div>
</div>
로그인 후 복사

jquery code

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
//全选
$(".seleAll").on("click", function() {
var oin = $("input[type=&#39;checkbox&#39;]")
oin.each(function() {
$(this).prop("checked", true)
})
})
//全不选
$(".op").on("click", function() {
var oin = $("input[type=&#39;checkbox&#39;]")
oin.each(function() {
$(this).prop("checked", false)
})
})
// 反选 
$(".reverse").on("click", function() {
// 获取节点 
var oin = $("input[type=&#39;checkbox&#39;]")
oin.each(function() {
this.checked = !this.checked
})
})
// 批量删除 
$(".del").on("click", function() {
var sele = $(":checkbox:checked")
if(sele.length > 0) {
sele.each(function() {
$(this).parent().remove()
})
} else {
alert("至少选一个数据")
}
})
</script>
로그인 후 복사

작업 효과:

jquery를 사용하여 모두 선택하고 삭제하는 방법

을 선택하세요.

위 내용은 jquery를 사용하여 모두 선택하고 삭제하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿