Я ломал голову над этой проблемой уже несколько дней.Я работаю над сайтом WordPress, который использует контактную форму 7 (CF7).По сути, я пытаюсь изменить, чтобы каждый элемент списка менял цвет при установленном флажке.
Эта тема была моим основным источником вдохновения: https://www.sitepoint.com/community/t/on-click-of-check-box-my-div-border-and-text-color-should-be-in-blue/276230/3
Но я не уверено том, как заставить код работать в редакторе CF7 (я пробовал форумы поддержки в этом плагине, но никто не ответил мне, ха-ха).
Соответствующий код в CF7:
<span onclick="UpdateFeatures(this,false);"> [checkbox* InterestsAndGoals id:getStartedInterestsAndGoals use_label_element "Growth" "Marketing Exposure" "Increase in overall traffic" "Edge over your competition" "Increase in low season traffic"]</span>
Javascript, используемый в CF7:
<script>
function UpdateFeatures(checkbox) {
console.log(document.querySelector(".wpcf7-list-item"));
document.querySelector(".wpcf7-list-item").classList.remove("changeColor");
if (checkbox.checked) {
document.querySelector(".wpcf7-list-item").classList.add("changeColor");
}
}
</script>
CSS:
#getStartedInterestsAndGoals input[type=checkbox] {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
span.wpcf7-list-item {
display: inline-block;
margin: 0 0 15px 0;
}
.wpcf7-list-item {
margin: 0 0 20px 1em;
border: 1px solid #f26922;
border-radius: 40px;
text-transform: uppercase;
font-size: 16px;
padding: 10px;
width: 100%;
}
.wpcf7-list-item:hover {
background-color: #f26922;
border-color: #333333;
color: #ffffff;
}
.changeColor {
background-color: #f26922;
border-color: #333333;
color: #ffffff;
}
JSFiddle для демонстрации кода, сделанного из CF7: https://jsfiddle.net/p9wrdsmo/1/
Любая помощь с этим будетс благодарностью!Я не очень хорош в JavaScript и предпочел бы чистый HTML / CSS, но я не верю, что это возможно.
Спасибо !!