jQuery change parent div radio input with different background-CodePudding

Within a form, I have inserted four radio inputs; the code is as follows:

jQuery(document).ready(function($) {
  $("#checkact1").on("click", function() {
    if ($(this).is(':checked')) {
      $('#ck01').addClass('st1_bk_color');
      $('#ck02').removeClass('st2_bk_color');
      $('#ck03').removeClass('st3_bk_color');
      $('#ck04').removeClass('st4_bk_color');
    }
  });
  $("#checkact2").on("click", function() {
    if ($(this).is(':checked')) {
      $('#ck01').removeClass('st1_bk_color');
      $('#ck01').addClass('st0_bk_color');
      $('#ck02').addClass('st2_bk_color');
      $('#ck03').removeClass('st3_bk_color');
      $('#ck04').removeClass('st4_bk_color');
    }
  });
  $("#checkact3").on("click", function() {
    if ($(this).is(':checked')) {
      $('#ck01').removeClass('st1_bk_color');
      $('#ck01').addClass('st0_bk_color');
      $('#ck02').removeClass('st2_bk_color');
      $('#ck03').addClass('st3_bk_color');
      $('#ck04').removeClass('st4_bk_color');
    }
  });
  $("#checkact4").on("click", function() {
    if ($(this).is(':checked')) {
      $('#ck01').removeClass('st1_bk_color');
      $('#ck01').addClass('st0_bk_color');
      $('#ck02').removeClass('st2_bk_color');
      $('#ck03').removeClass('st3_bk_color');
      $('#ck04').addClass('st4_bk_color');
    }
  });
});

#form .col:nth-child(1) input[type="radio"]:checked,
#form .col:nth-child(2) input[type="radio"]:checked,
#form .col:nth-child(3) input[type="radio"]:checked,
#form .col:nth-child(4) input[type="radio"]:checked {
  border-color: #FF1493;
  background-color: #FF1493;
  box-shadow: none;
}

#form .col:nth-child(1) input[type="radio"]:checked label,
#form .col:nth-child(1) input[type="radio"]:checked label span,
#form .col:nth-child(2) input[type="radio"]:checked label,
#form .col:nth-child(2) input[type="radio"]:checked label span,
#form .col:nth-child(3) input[type="radio"]:checked label,
#form .col:nth-child(3) input[type="radio"]:checked label span,
#form .col:nth-child(4) input[type="radio"]:checked label,
#form .col:nth-child(4) input[type="radio"]:checked label span {
  color: #FFFFFF !important;
}

.st0_bk_color {
  background-color: #f5f8fa !important;
}

.st1_bk_color {
  background-color: #7e8299 !important;
}

.st2_bk_color {
  background-color: #20c997 !important;
}

.st3_bk_color {
  background-color: #7239ea !important;
}

.st4_bk_color {
  background-color: #fd7e14 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
  <div >
    <div id="ck01">
      <input type="radio" name="checkact" id="checkact1" value="option1" checked>
      <label for="checkact1"> Lorem <br> <span>Ipsum</span></label>
    </div>
  </div>
  <div >
    <div id="ck02">
      <input type="radio" name="checkact" id="checkact2" value="option2" checked>
      <label for="checkact2"> Lorem <br> <span>Ipsum</span></label>
    </div>
  </div>
  <div >
    <div id="ck03">
      <input type="radio" name="checkact" id="checkact3" value="option3" checked>
      <label for="checkact3"> Lorem <br> <span>Ipsum</span></label>
    </div>
  </div>
  <div >
    <div id="ck04">
      <input type="radio" name="checkact" id="checkact4" value="option4" checked>
      <label for="checkact4"> Lorem <br> <span>Ipsum</span></label>
    </div>
  </div>
</form>

How can I write it better and optimize it?

CodePudding user response：

You can do it like this:

jQuery( document ).ready( function( $ ){
    $("input[id^=checkact]").click(function() {
      var n = $(this).attr("id").replace("checkact","");
      $('div[id^=ck]').removeClass("st1_bk_color st2_bk_color st3_bk_color st4_bk_color")
      $('#ck'   ('0'   n).slice(-2)).addClass(`st${n}_bk_color`);
    }).filter(":checked").trigger("click")
});

Main thing is that I use the id^= selector, that means it will select all elements where the id start with what is defined after ^=. like : id^=checkact

Demo

jQuery( document ).ready( function( $ ){
    $("input[id^=checkact]").click(function() {
      var n = $(this).attr("id").replace("checkact","");
      $('div[id^=ck]').removeClass("st1_bk_color st2_bk_color st3_bk_color st4_bk_color")
      $('#ck'   ('0'   n).slice(-2)).addClass(`st${n}_bk_color`);
    }).filter(":checked").trigger("click")
});

#form .col:nth-child(1) input[type="radio"]:checked,
#form .col:nth-child(2) input[type="radio"]:checked,
#form .col:nth-child(3) input[type="radio"]:checked,
#form .col:nth-child(4) input[type="radio"]:checked {
    border-color: #FF1493;
    background-color: #FF1493;
    box-shadow: none;
}
#form .col:nth-child(1) input[type="radio"]:checked   label,
#form .col:nth-child(1) input[type="radio"]:checked   label span,
#form .col:nth-child(2) input[type="radio"]:checked   label,
#form .col:nth-child(2) input[type="radio"]:checked   label span,
#form .col:nth-child(3) input[type="radio"]:checked   label,
#form .col:nth-child(3) input[type="radio"]:checked   label span,
#form .col:nth-child(4) input[type="radio"]:checked   label,
#form .col:nth-child(4) input[type="radio"]:checked   label span {
    color: #FFFFFF !important;
}
.st0_bk_color {
    background-color: #f5f8fa !important;
}
.st1_bk_color {
    background-color: #7e8299 !important;
}
.st2_bk_color {
    background-color: #20c997 !important;
}
.st3_bk_color {
    background-color: #7239ea !important;
}
.st4_bk_color {
    background-color: #fd7e14 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
  <div >
    <div id="ck01">
      <input type="radio" name="checkact" id="checkact1" value="option1" checked>
      <label for="checkact1"> Lorem <br> <span>Ipsum</span></label>
    </div>
  </div>
  <div >
    <div id="ck02">
      <input type="radio" name="checkact" id="checkact2" value="option2" >
      <label for="checkact2"> Lorem <br> <span>Ipsum</span></label>
    </div>
  </div>
  <div >
    <div id="ck03">
      <input type="radio" name="checkact" id="checkact3" value="option3" >
      <label for="checkact3"> Lorem <br> <span>Ipsum</span></label>
    </div>
  </div>
  <div >
    <div id="ck04">
      <input type="radio" name="checkact" id="checkact4" value="option4" >
      <label for="checkact4"> Lorem <br> <span>Ipsum</span></label>
    </div>
  </div>        
</form>