给宣总的，测试CHECKBOX选中与未选中变更颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Check Box Demo</title>
<style>
div{
color:#ffffff;
background-color:black;
position:absolute;
top:100px;
left:100px;
z-index:0;
}
</style>
</head>
<body>
<form action="/" method="post">
<!-- 文本输入框 -->
<label for="name">用户名:</label>
<input type="text" id="name" name="name" required>
<br>
<!-- 密码输入框 -->
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<br>
<!-- 单选按钮 -->
<label>性别:</label>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
<br>
<!-- 复选框 -->
<!-- <input type="checkbox" id="subscribe1" name="subscribe" checked οnclick="chgColor(this,'label1')"> -->
<input type="checkbox" id="subscribe1" name="subscribe" οnclick="chgColor(this)" labelId="label1">
<label for="subscribe1" id="label1">订阅推送信息1</label>
<input type="checkbox" id="subscribe2" name="subscribe" οnclick="chgColor(this)" labelId="label2">
<label for="subscribe2" id="label2">订阅推送信息2</label>
<input type="checkbox" id="subscribe3" name="subscribe" οnclick="chgColor(this)" labelId="label3">
<label for="subscribe3" id="label3">订阅推送信息3</label>
<br>
<!-- 下拉列表 -->
<label for="country">国家:</label>
<select id="country" name="country">
<option value="cn">CN</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
<br>
<!-- 提交按钮 -->
<input type="submit" value="提交">
</form>
<script>
function chgColor(checkbox){
var id = checkbox.getAttribute('labelId');
// 获取元素
var myDiv = document.getElementById(id);
if (checkbox.checked == true){
//Action for checked
myDiv.style.color = 'red'; // 设置文字颜色为蓝色
//myDiv.style.fontSize = '20px'; // 设置文字大小为20像素
myDiv.style.backgroundColor = 'yellow'; // 设置背景颜色为黄色
}else{
//Action for not checked
myDiv.style.color = 'black'; // 设置文字颜色为蓝色
//myDiv.style.fontSize = '20px'; // 设置文字大小为20像素
myDiv.style.backgroundColor = 'white'; // 设置背景颜色为黄色
}
}
</script>
</body>
</html>
扫一扫
4561
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
