我有一个调查页面,用户可以点击1 - 5分的按钮来说明他们的体验。目前,点击一个按钮(比如说5分中的3分)将改变该按钮的背景色,以表明它被点击了。如果我想让所有按钮都有更新的背景色,以达到任何点击的效果,最好的方法是什么?例如:如果用户点击5个按钮中的"3",则将突出显示按钮1、2和3。
任何帮助都感激不尽。
超文本:
<section class="l-reviews pt-30 pb-15">
<div class="contain">
<div class="row">
<div class="col-md-12">
<div class="reviews-wrapper">
<div class="reviews-top-header">
<p id="">Thank you for taking part. Please complete this survey to let us know how we’re
doing.</p>
<p>Please rate the following on a 1-5 scale (1 = Least, 5 = Most)</p>
</div>
<div class="reviews-body">
<form method='post' name='front_end' action="">
<div class="form-control">
<p>1. Were the payroll process and benefits options explained to you fully?</p>
<div class="input-holder">
<input type='hidden' name='title' value='' />
<input type='hidden' name='email' value='' />
<input type="radio" data='Unsatisfied' name='satisfaction' value='20' id='sat-1' /><label for="sat-1"></label>
<input type="radio" data='Not Very Satisfied' name='satisfaction' value='40' id='sat-2' /><label for="sat-2"></label>
<input type="radio" data='Neutral' name='satisfaction' value='60' id='sat-3' /><label for="sat-3"></label>
<input type="radio" data='Satisfied' name='satisfaction' value='80' id='sat-4' /><label for="sat-4"></label>
<input type="radio" data='Highly Satisfied' name='satisfaction' value='100' id='sat-5' /><label for="sat-5"></label>
</div>
</div>
<button type="button" class="send-btn">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
Javascript:
$('.send-btn').click(function(e) {
e.preventDefault();
let checkOne = false;
let checkTwo = false;
let checkThree = false;
let checkFour = false;
let checkFive = false;
CSS:
#wr-1:checked+label,
#application-rating-1:checked+label,
#goals-rating-1:checked+label,
#refer-rating-1:checked+label,
#sat-1:checked+label {
background: url('/wp-content/themes/theme52950/images/reviews-faces/1-hover.png');
height: 55px;
width: 109px;
display: inline-block;
padding: 0 0 0 0px;
background-repeat: no-repeat;
}
1条答案
按热度按时间laik7k3q1#
原生的复选框不能被样式化,所以你不能很容易地给一个未选中的复选框添加一个选中的外观。但是你可以隐藏原生的外观,并对show a checkbox with round border做一些CSS技巧。
有了这个,你可以使用jQuery(或原生JS)来添加一个选中的外观到圆形边框,这里是到当前复选框之前的所有复选框: