#jquery #html
#jquery #HTML
Вопрос:
Я пытаюсь добавить тег span с «Предпочтительным» текстом в div, когда установлен флажок (другой тег span) и присутствует галочка. Когда этот флажок снят, тег 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 с «предпочтительными» текстами.
Может кто-нибудь подсказать мне в этом, пожалуйста? Кроме того, как бы мне заставить эту функцию работать, даже если изначально галочка уже присутствует?
Ответ №1:
Если я правильно понял ваш вопрос, похоже, у вас почти получилось. В вашем JS событие click прослушивается в теге span вместо тега input.
Попробуйте этот JS .. где я сначала беру идентификатор флажка (ввод), а не тег span.
$("#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();
}
});
Комментарии:
1. Спасибо. Ваш ответ был опубликован быстрее всего, и в то же время он сработал для меня. Как вы сказали, в итоге я выбрал неправильный целевой тег.
Ответ №2:
Ваш JS-код работает нормально, просто вам нужно настроить таргетинг на <input id="checkbox1" ... > by $("#checkbox1").unbind().click(...) вместо таргетинга <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> Комментарии:
1. Спасибо. Как вы и предлагали, я выбрал неправильный целевой тег. Я действительно ценю это.
Ответ №3:
Вы устанавливаете неправильный элемент.
Попробуйте вместо этого использовать правильный селектор this . В вашем случае это ссылка на элемент span, а не на элемент checkbox
например
$("#checkbox1").is(':checked')