jquery - Jquery attr('checked') 问题
问题描述
大家好,我是 JS/jQuery 的初学者,我在将检查属性添加到输入时遇到问题。
$(".switch-label-2").click(function () {
var span = $(this).parent().siblings('#reminderstatus');
var status = span.html().trim() == "OFF" ? "ON" : "OFF";
var color = span.html() == "ON" ? "#a2a2a2" : "#89c12d";
span.html(status);
span.css('color', color);
console.log(status);
if (status == "ON") {
$("#switch-2").attr('checked', true);
} else {
$("#switch-2").attr('checked', false);
}
});
.box {
position: fixed;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
.remindertoggle {
text-align: center;
margin: 10px 0;
}
#reminderstatus {
color: #a2a2a2;
margin-right: 5px;
}
.switch {
position: relative;
display: inline-block;
}
.switch-label-2 {
margin-bottom: 0;
display: block;
width: 48px;
height: 24px;
text-indent: -150%;
clip: rect(0 0 0 0);
color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.switch-label-2:before,
.switch-label-2:after {
content: "";
display: block;
position: absolute;
cursor: pointer;
}
.switch-label-2:before {
width: 100%;
height: 24px;
background-color: #dedede;
border-radius: 9999em;
-webkit-transition: background-color 0.25s ease;
transition: background-color 0.25s ease;
}
.switch-label-2:after {
top: 0;
left: 0;
width: 24px;
height: 24px;
border-radius: 50%;
/*background-color: #fff;*/
-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
-webkit-transition: left 0.25s ease;
transition: left 0.25s ease;
}
.switch-input:checked + .switch-label-2:before {
background-color: #89c12d;
}
.switch-input:checked + .switch-label-2:after {
left: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="remindertoggle">
<span id="reminderstatus">OFF</span>
<div id="switch" class="switch">
<input id="switch-2" type="checkbox" class="switch-input"> <label for="switch-2" class="switch-label-2">Switch</label>
</div>
</div>
</div>
您会注意到,当我单击切换标签时,除了一件事外,所有内容都根据需要进行了更改,在第一次单击时,它添加属性检查以输入放置它并没有检查复选框是否真实。
我很困惑一整天都无法解决这个问题,我用谷歌搜索了一遍,找不到答案。
进一步感谢任何信息和建议。
解决方案
您需要使用该prop(...)
函数来检查和设置适当的值。
您还应该防止事件冒泡,preventDefault
因为这会导致第一次点击时出现异常。
$(".switch-label-2").click(function(e) {
e.preventDefault();
var isOn = $("#switch-2").prop('checked');
// flip text status
$('#reminderstatus').text(isOn ? "OFF" : "ON");
// flip checked status
$("#switch-2").prop('checked', !isOn);
});
.box {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.remindertoggle {
text-align: center;
margin: 10px 0;
}
#reminderstatus {
color: #a2a2a2;
margin-right: 5px;
}
.switch {
position: relative;
display: inline-block;
}
.switch-label-2 {
margin-bottom: 0;
display: block;
width: 48px;
height: 24px;
text-indent: -150%;
clip: rect(0 0 0 0);
color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.switch-label-2:before,
.switch-label-2:after {
content: "";
display: block;
position: absolute;
cursor: pointer;
}
.switch-label-2:before {
width: 100%;
height: 24px;
background-color: #dedede;
border-radius: 9999em;
-webkit-transition: background-color 0.25s ease;
transition: background-color 0.25s ease;
}
.switch-label-2:after {
top: 0;
left: 0;
width: 24px;
height: 24px;
border-radius: 50%;
/*background-color: #fff;*/
-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
-webkit-transition: left 0.25s ease;
transition: left 0.25s ease;
}
.switch-input:checked+.switch-label-2:before {
background-color: #89c12d;
}
.switch-input:checked+.switch-label-2:after {
left: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="remindertoggle">
<span id="reminderstatus">OFF</span>
<div id="switch" class="switch">
<input id="switch-2" type="checkbox" class="switch-input">
<label for="switch-2" class="switch-label-2">Switch</label>
</div>
</div>
</div>
推荐阅读
- java - 解析 YAML 文件而不事先编写 java 类
- ios - 将项目从目标 c 移动到 swift 时,“AnyHashable”类型的值没有下标
- rust - Assertion fails in g_application_parse_command_line whenever gtk application run multiple times
- cmake - 使用 cmake 设置 gcovr-如何在所有静态库上递归获取代码覆盖率
- python - How to get all element in list after matched string in python
- leaflet - 传单地图上的中心轨迹(geoJSON 数据)
- css - 故事书 - 包含资产文件夹中的 css 返回“拒绝包含...”错误
- javascript - Detect URL change in querystring
- javascript - JavaScript: How to copy all properties of Object to a Class variables?
- python - Python Jupyter 安装 line_profiler 失败