ホームページ >ウェブフロントエンド >jsチュートリアル >チェックボックスチェックボックスのJavaScript実装サンプルコード_JavaScriptスキル
チェックボックスチェックボックスのJavaScript実装サンプルコード_JavaScriptスキル
- WBOYオリジナル
- 2016-05-16 15:20:311653ブラウズ
この記事では、チェックボックスを実装し、チェックボックスを美しくするための JavaScript のサンプルコードを紹介します。具体的な内容は次のとおりです。
1. 美化操作のチェックボックス
チェック ボックスのデフォルトの外観は満足のいくものではなく、美的要件が低いページには対応できますが、ページの要件がより洗練されている場合は、チェック ボックスを美しくするにはあまりにも抵抗があるかもしれません。皆様にとって少しでもお役に立てれば幸いです。
コード例は次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>checkbox复选框</title>
<style type="text/css">
.CheckBoxClass{display:none;}
.CheckBoxLabelClass{
background:url("mytest/jQuery/UnCheck.png") no-repeat;
padding-left:30px;
padding-top:3px;
margin:5px;
height:28px;
width:150px;
display:block;
}
.CheckBoxLabelClass:hover{text-decoration:underline;}
.LabelSelected{background:url("mytest/jQuery/Check.png") no-repeat;}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".CheckBoxClass").change(function(){
if($(this).is(":checked")){
$(this).next("label").addClass("LabelSelected");
}
else{
$(this).next("label").removeClass("LabelSelected");
}
});
})
</script>
</head>
<body>
<div>
<input id="CheckBox1" type="checkbox" class="CheckBoxClass"/>
<label id="Label1" for="CheckBox1" class="CheckBoxLabelClass">脚本之家一</label>
<input id="CheckBox2" type="checkbox" class="CheckBoxClass"/>
<label id="Label2" for="CheckBox2" class="CheckBoxLabelClass">脚本之家二</label>
</div>
</body>
</html>
2. すべてのチェックボックスを選択および選択解除するサンプルコード
すべてのチェック ボックスをオンまたはオフにするのは非常に一般的な操作です。この章では、複数の選択機能と選択解除機能を実装できるコード例を紹介します。
コード例は次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$("#all").click(function(){
if(this.checked)
{
$("input[name='checkbox']").each(function(){this.checked=true;});
$("#btn1").attr("value","反选");
}
else
{
$("input[name='checkbox']").each(function(){this.checked=false;});
$("#btn1").attr("value","全选");
}
});
$("#btn1").click(function(){
$("[name='checkbox']").attr("checked",'true');
})
$("#cancel").click(function(){
$("[name='checkbox']").removeAttr("checked");
})
$("#jishu").click(function(){
$("[name='checkbox']:even").attr("checked",'true');
})
$("#fanxuan").click(function(){
$("[name='checkbox']").each(function(){
if($(this).attr("checked"))
{
$(this).removeAttr("checked");
}
else
{
$(this).attr("checked",'true');
}
})
})
$("#get").click(function(){
var str="";
$("[name='checkbox'][checked]").each(function(){
str+=$(this).val()+"/r/n";
})
alert(str);
})
})
</script>
</head>
<body>
<form name="form1" method="post" action="">
<input type="checkbox" id="all" name="all">
<input type="button" id="btn1" value="全选">
<input type="button" id="cancel" value="取消全选">
<input type="button" id="jishu" value="选中所有奇数">
<input type="button" id="fanxuan" value="反选">
<input type="button" id="get" value="获得选中的所有值">
<br>
<input type="checkbox" name="checkbox" value="脚本之家一">
脚本之家一
<input type="checkbox" name="checkbox" value="脚本之家二">
脚本之家二
<input type="checkbox" name="checkbox" value="脚本之家三">
脚本之家三
<input type="checkbox" name="checkbox" value="脚本之家四">
脚本之家四
<input type="checkbox" name="checkbox" value="脚本之家五">
脚本之家五
<input type="checkbox" name="checkbox" value="脚本之家六">
脚本之家六
<input type="checkbox" name="checkbox" value="脚本之家七">
脚本之家七
<input type="checkbox" name="checkbox" value="脚本之家八">
脚本之家八
</form>
</body>
</html>
以上はチェックボックスに関するもので、皆さんの学習に役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。