当一个按钮被点击时,我如何使用Javascript对多个按钮应用CSS?

6g8kf2rb  于 2023-01-19  发布在  Java
关注(0)|答案(1)|浏览(145)

我有一个调查页面,用户可以点击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;
    }
laik7k3q

laik7k3q1#

原生的复选框不能被样式化,所以你不能很容易地给一个未选中的复选框添加一个选中的外观。但是你可以隐藏原生的外观,并对show a checkbox with round border做一些CSS技巧。
有了这个,你可以使用jQuery(或原生JS)来添加一个选中的外观到圆形边框,这里是到当前复选框之前的所有复选框:

$(function() {
  $('.form-control input[type="radio"]').click(function(e) {
    let $el = $(this);
    console.log('clear all highlights');
    $el.parent().find('input[type="radio"]').css({ backgroundColor: '#FF572233' });
    let id = $el.attr('id');
    do {
      if(id) {
        console.log('highlight', id);
        $el.css({ backgroundColor: '#993333' });
      }
      $el = $el.prev().prev();
      id = $el.attr('id');
    } while(id);
  });
});
.form-control input[type="radio"] {
  height: 0.9rem;
  width: 0.9rem;
  margin-right: 0.5rem;
  /* The native appearance is hidden */
  appearance: none;
  -webkit-appearance: none;
  /* For a circular appearance we need a border-radius. */
  border-radius: 50%;
  /* The background will be the radio dot's color. */
  background: #FF572233;
  /* The border will be the spacing between the dot and the outer circle */
  border: 3px solid #FFF;
  /* And by creating a box-shadow with no offset and no blur, we have an outer circle */
  box-shadow: 0 0 0 1px #FF5722;
}
.form-control input[type="radio"]:checked {
  background: #993333;
}
.send-btn {
  margin-top: 15px;
}
.as-console-wrapper { max-height: 85px !important; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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-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>

相关问题