选择收音机时更改卡片的背景

Question

我的问题非常简单：如何在选择按钮无线电时向我的卡元素添加背景颜色？

<div class="col-6 col-md-3 mt-4 text-center my-auto">
            <label for="'.$abreviation.'">
                <div class="card card-block d-flex">
                    <div class="card-body align-items-center d-flex justify-content-center">
                        <input type="radio" id="'.$abreviation.'" name="tri" value="'.$abreviation.'" class="check-on" /> '.$tri.'
                    </div>
                </div>
            </label>
        </div>

有没有办法只用 css 来实现这一点，或者我必须使用 javascript 或 jquery ？ 我尝试这样做，但所有卡片都是红色背景颜色，而不仅仅是选择收音机的卡片。

    $(document).ready(function(){

        $(".check-on").click(function(){

          $('.check-on').parent().parent().addClass('backgroundCard') 

        });

    });

非常感谢您的帮助。

Answer 1

1. 当input 标签位于label 标签内时，您无需将标签绑定到具有for 属性的输入。
2. 无需任何 JS 即可对卡片进行样式设置。为此，您可以在输入字段旁边放置一张卡片，使用 d-none 类隐藏输入，然后使用 adjacent element combinator。

尝试点击卡片。它们现在用作单选按钮。

input[type="radio"]:checked + .card {
  background: #f1f1f1;
}

<div class="col-6 col-md-3 mt-4 text-center my-auto">
    <label>
        <input type="radio" name="tri" value="'.$abreviation.'" class="d-none" />
        <div class="card card-block d-flex">
            <div class="card-body align-items-center d-flex justify-content-center">
                '.$tri.'
            </div>
        </div>
    </label>
</div>

<div class="col-6 col-md-3 mt-4 text-center my-auto">
    <label>
        <input type="radio" name="tri" value="'.$abreviation2.'" class="d-none" /> 
        <div class="card card-block d-flex">
            <div class="card-body align-items-center d-flex justify-content-center">
                '.$tri.'
            </div>
        </div>
    </label>
</div>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

Answer 2

$(document).ready(function(){
    $(".check-on").click(function(){
          $(this).parent().parent().addClass('backgroundCard')
    });
});

一旦您将注意力集中在被点击的元素上，请仅使用 this 选择器将注意力集中在该元素上。你又在哪里按类全选

Answer 3

您可以使用on change 事件添加和删除类。

如果您有多个无线电组，您可以获得这些无线电的name，并在此基础上删除正确卡的类别：

$(this).attr('name');

$('.check-on').on('change', function() {
  let radioName = $(this).attr('name');
  $(`.check-on[name=${radioName}]`).closest('.card.backgroundCard').removeClass('backgroundCard');
  $(this).closest('.card').addClass('backgroundCard');
});

.card.backgroundCard {
  background: #f1f1f1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="col-6 col-md-3 mt-4 text-center my-auto">
    <label for="'.$abreviation.'">
        <div class="card card-block d-flex">
            <div class="card-body align-items-center d-flex justify-content-center">
                <input type="radio" id="'.$abreviation.'" name="tri" value="'.$abreviation.'" class="check-on" /> '.$tri.'
            </div>
        </div>
    </label>
</div>

<div class="col-6 col-md-3 mt-4 text-center my-auto">
    <label for="'.$abreviation2.'">
        <div class="card card-block d-flex">
            <div class="card-body align-items-center d-flex justify-content-center">
                <input type="radio" id="'.$abreviation2.'" name="tri" value="'.$abreviation2.'" class="check-on" /> '.$tri.'
            </div>
        </div>
    </label>
</div>

Answer 4

不需要 Javascript 或 Jquery 来执行此操作。只需简单的 CSS 就足够了。

/* This css is for normalizing styles. You can skip this. */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.new {
  padding: 50px;
}

.form-group {
  display: block;
  margin-bottom: 15px;
}

.form-group input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.form-group label {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 10px;
}

.form-group label:before {
  content: '';
    position: absolute;
    -webkit-appearance: none;
    background-color: transparent;
    border: 2px solid #0079bf;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.form-group input:checked + label:after {
  content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0079bf;
    z-index: -1;
  
}

<div class="new">
  <form>
    <div class="form-group">
      <input type="radio" id="$tri-1" name="radio">
      <label for="$tri-1">$tri-1</label>
    </div>
    <div class="form-group">
      <input type="radio" id="$tri-2" name="radio">
      <label for="$tri-2">$tri-2</label>
    </div>
    <div class="form-group">
      <input type="radio" id="$tri-3" name="radio">
      <label for="$tri-3">$tri-3</label>
    </div>
  </form>
</div>