我目前正在Wordpress网站上工作,但无法获得有效的复选框JS代码,无法向自己的父元素添加checked
类。
该代码段运行良好,但是为什么在我的Wordpress网站上却不起作用?
$(":checkbox").on('click', function() {
$(this).parent('span').toggleClass("checked");
});
span.cb-style input[type=checkbox] {
cursor: pointer;
background: 0 0;
position: relative;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
float: left;
border: none;
opacity: 0;
}
span.cb-style {
cursor: pointer;
display: inline-block;
width: 18px;
height: 18px;
position: relative;
top: 4px;
border: 3px solid #ddd;
background: #fff;
visibility: visible;
margin-right: 10px
}
span.cb-style:hover {
background: #ddd
}
.checked {
background-color: #ff0000!important;
border-color: #ff0000!important;
}
.checked:after {
font-family: "Font Awesome 5 Free";
content: 'x';
color: white;
position: absolute;
font-size: 25pt;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: -75% auto;
pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tnp-field tnp-field-checkbox tnp-field-privacy">
<span class="cb-style">
<input type="checkbox" name="ny" required="" class="tnp-privacy" id="tnp-privacy">
</span>
<label for="tnp-privacy">
<a target="_blank" href="#">Checkbox Sample Text Bla.</a>
</label>
</div>