jqueryを使って全選択して削除する方法

jquery を使用してすべてを選択して削除する方法: 最初に HTML コード サンプル ファイルを作成し、次に jquery コードを変更し、最後に "$(".seleAll").on("click", function() を渡します。 {. ..}" メソッドを使用して全選択削除機能を実現します。

#このチュートリアルの動作環境: Windows7 システム、jquery1.10.0 バージョン、 Dell G3 コンピューター。

推奨: 「jquery ビデオ チュートリアル」

jquery を使用して全選択削除機能を実装する

##html コード

<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 コード

<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を使って全選択して削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。