ホームページ > 記事 > ウェブフロントエンド > jQuery では、選択や選択を反転するのではなく、すべてを選択する機能をどのように実装していますか? (詳しいコード説明)
jQuery では、選択や選択を反転するのではなく、すべてを選択する機能をどのように実装していますか? (詳しいコード説明)
- 青灯夜游転載
- 2018-10-25 16:27:371590ブラウズ
この記事では、選択ではなく全選択、選択を反転する機能を jQuery で実装する方法を紹介します (コードの詳細説明)。困っている友人は参考にしていただければ幸いです。
jQuery と Font Awesome フォント アイコンを組み合わせて、選択ではなくすべてを選択、選択を反転する機能を実現します。
Font Awesome フォント アイコンのリンク アドレス: http://www.fontawesome.com.cn/faicons/
効果:
##コード:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css" />
<style type="text/css">
label {
display: inline-flex;
display: -webkit-inline-flex;
position: relative;
cursor: pointer;
width: 6%;
}
.box {
cursor: pointer;
width: 16px;
height: 16px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
border: 1px solid lightblue;
background: lightblue;
}
.fa-check {
position: absolute;
top: 3px;
left: 2px;
color: #fff;
border: none;
}
</style>
</head>
<body>
<p class="wrapper">
<label>
<input type="checkbox" class="box"/>
<span class="remeber">
香蕉
</span>
<i class="fa fa-fw"></i>
</label>
<label class="wrapper">
<input type="checkbox" class="box" />
<span class="remeber">
苹果
</span>
<i class="fa fa-fw"></i>
</label>
<label class="wrapper">
<input type="checkbox" class="box"/>
<span class="remeber">
西瓜
</span>
<i class="fa fa-fw"></i>
</label>
<label class="wrapper">
<input type="checkbox" class="box"/>
<span class="remeber">
橘子
</span>
<i class="fa fa-fw"></i>
</label>
</p>
<br>
<input type="button" name="" id="check-all" value="全选" />
<input type="button" name="" id="check-no" value="不选" />
<input type="button" name="" id="check-reverse" value="反选" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function() {
$('body').on("click", ".box", function() {
$(this).parent().find('.fa').toggleClass('fa-check');
});
//全选
$("#check-all").click(function() {
$(".wrapper label i").each(function() {
$(this).addClass("fa-check");
})
});
//不选
$("#check-no").click(function() {
$(".wrapper label i").each(function() {
$(this).removeClass("fa-check");
})
});
//反选
$("#check-reverse").click(function() {
$(".wrapper label i").each(function() {
$(this).toggleClass("fa-check");
})
});
})
</script>
</body>
</html>以上がjQuery では、選択や選択を反転するのではなく、すべてを選択する機能をどのように実装していますか? (詳しいコード説明)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はcnblogs.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。