如何正确设置div复选标记上的条件？
如何正确设置div复选标记上的条件？
提问于 2019-03-14 23:36:23
当一个复选框(一个不同的span标记)被点击并出现复选标记时，我试图将一个带有“首选”文本的span标记附加到div中。如果未选中此选项，则带有“首选”文本的span标记将消失。
然而，我很难正确地设置条件，因为它一直转到第二个条件，其中没有单击或显示复选标记。
$("#pref-a").unbind().click(function() {
if ($(this).is(':checked')) {
// $(this).attr('value', 'true');
$(this).attr('checked', true);
$("#pref-value1").append("<span style='position:relative; top:-13px; margin: 35px' class='label label-default'>Preferred</span>");
} else {
// $(this).attr('value', 'false');
$(this).attr('checked', false);
$("#pref-value1").children("span").remove();
}
}); /* The container */
.container {
position: relative;
padding-left: 35px;
/*margin-bottom: 16px;*/
cursor: pointer;
font-size: 15px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
#Pref {
display: table-cell;
vertical-align: middle;
height: 50px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pref-value1" class="form-group Pref">
<label class="container">
<input id="checkbox1" name="preferred1" type="checkbox" value="false">
<span id="pref-a" class="checkmark" style="margin: -2px 1px;" />
</label>
</div>
我尝试了许多不同的条件，比如：
($(this).prop(':checked')) or ($(this).is(':checked')) == false但是，它会导致相同的问题，或者添加多个具有“首选”文本的span标记。
有人能在这方面给我指点一下吗？另外，即使最初已经有一个复选标记，我如何才能让这个函数工作？
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-03-14 23:47:16
如果我对你的问题理解正确的话，看起来你差不多回答对了。在JS中，在span标记上侦听单击事件，而不是在input标记上。
尝试这个JS..where我首先获取复选框的ID (输入)，而不是跨度标记。
$("#checkbox1").click(function() {
if ($(this).is(':checked')) {
// $(this).attr('value', 'true');
$(this).attr('checked', true);
$("#pref-value1").append("<span style='position:relative; top:-13px; margin: 35px' class='label label-default'>Preferred</span>");
} else {
// $(this).attr('value', 'false');
$(this).attr('checked', false);
$("#pref-value1").children("span").remove();
}
});Stack Overflow用户
发布于 2019-03-15 01:05:16
您的JS代码运行良好，只是您需要通过$("#checkbox1").unbind().click(...)来针对<input id="checkbox1" ... >，而不是针对<span>
$("#checkbox1").unbind().click(function() {
if ($(this).is(':checked')) {
// $(this).attr('value', 'true');
$(this).attr('checked', true);
$("#pref-value1").append("<span style='position:relative; top:-13px; margin: 35px' class='label label-default'>Preferred</span>");
} else {
// $(this).attr('value', 'false');
$(this).attr('checked', false);
$("#pref-value1").children("span").remove();
}
}); /* The container */
.container {
position: relative;
padding-left: 35px;
/*margin-bottom: 16px;*/
cursor: pointer;
font-size: 15px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
#Pref {
display: table-cell;
vertical-align: middle;
height: 50px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pref-value1" class="form-group Pref">
<label class="container">
<input id="checkbox1" name="preferred1" type="checkbox" value="false">
<span id="pref-a" class="checkmark" style="margin: -2px 1px;" />
</label>
</div>
Stack Overflow用户
发布于 2019-03-14 23:43:21
你选错了元素。
尝试使用正确的选择器，而不是this。在本例中，这是对span元素的引用，而不是对复选框元素的引用
例如：
$("#checkbox1").is(':checked')页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55166530
复制相关文章
相似问题
腾讯云开发者
