jQuery 更改父级 div 具有不同背景的无线电输入

Question

在一个表单中，我插入了四个单选输入；代码如下：

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 class="col">
    <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 class="col">
    <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 class="col">
    <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 class="col">
    <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>

怎样才能写得更好，优化得更好？

Answer 1

你可以这样做：

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

主要是我使用了 id^= select 或者，这意味着它将 select 所有元素的 id 以 ^= 之后定义的开始。喜欢：id^=checkact

演示

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 class="col">
    <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 class="col">
    <div id="ck02">
      <input type="radio" name="checkact" id="checkact2" value="option2" >
      <label for="checkact2"> Lorem <br> <span>Ipsum</span></label>
    </div>
  </div>
  <div class="col">
    <div id="ck03">
      <input type="radio" name="checkact" id="checkact3" value="option3" >
      <label for="checkact3"> Lorem <br> <span>Ipsum</span></label>
    </div>
  </div>
  <div class="col">
    <div id="ck04">
      <input type="radio" name="checkact" id="checkact4" value="option4" >
      <label for="checkact4"> Lorem <br> <span>Ipsum</span></label>
    </div>
  </div>        
</form>

jQuery 更改父级 div 具有不同背景的无线电输入

jQuery change parent div radio input with different background

css

forms

jquery

radio-button