How can I use Javascript to apply CSS to multiple buttons when one is clicked?

Question

I have a survey page where users can click buttons on a scale from 1-5 to say how their experience was. Currently, clicking one button (say 3 out of 5) will change the background color of that one button to indicate it was clicked. What is the best way to approach this if I want to have all buttons have the updated background color up to whatever was clicked? Example: If they click "3" out of 5 then it would highlight buttons 1, 2, and 3.

Any help appreciated.

HTML:

<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;
    }

Peter Thoeny · Accepted Answer · 2023-01-18 19:13:57Z

Native checkboxes can't be styled, so you can't easily add a checked appearance to an unchecked checkbox. You can however hide the native appearance, and do some CSS trickery to show a checkbox with round border.

With this you can use jQuery (or native JS) to add a checked appearance to round borders, here to all checkboxes preceding the current one:

$(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>

Collectives™ on Stack Overflow

How can I use Javascript to apply CSS to multiple buttons when one is clicked?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related