web复选框的基础用法

86 阅读 0 评论 57 点赞

我是靠谱客的博主仁爱冬天，最近开发中收集的这篇文章主要介绍web复选框的基础用法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.12.0.min.js" ></script>
<style type="text/css">
.box{
width: 300px;
height: 300px;
background: yellow;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
//获得复选框的选择状态
var value = $("#key1").is(":checked");
if(value){
//把选择值改为true
$("#key2").attr("checked",true);
}else{
//把选择值改为false
$("#key2").attr("checked",false);
}
//使用post方法上传
$.post(url,{key1:value},function(data,status){
//data返回的数据，status请求状态
});
//把结果打印出来
console.log(value);
});
});
</script>
</head>
<body>
<div class="box">
<form action="http://127.0.0.1:8020/TestProject/test1.html" method="post">
<input type="checkbox" name="key1" value="yes" id="key1"/>
<input type="checkbox" name="key1" value="yes" id="key2"/>
<input type="button" id="button" value="Click"/>
</form>
</div>
</body>
</html>