jQuery:使用 parent(）、next(） 单击单选按钮上的样式和取消样式

jQuery: styling and unstyling on click radio button using parent(), next()

本文关键字：样式 取消 单选按钮 next 使用 parent jQuery 单击      更新时间：2023-09-26

我有3个相同的部分。 它们彼此完全相同。
我想要实现的是当我单击".rad1"（第一个单选按钮）时，它会设置其标签样式。
当我单击".rad2"时，它应该取消第一个单选按钮的样式化，并将第二个单选按钮风格化。

我只希望它发生在它自己的部分中，也就是说，当我单击一个部分时，样式仅适用于该部分，而不适用于其他部分。

这就是我所拥有的，但我还没有找到实现它的方法：

$('.rad1').click(function() {
    $(this).parent('.label1').css('background', 'red');
});
$('.rad2').click(function() {
    $(this).parent().next('.label1').css('background', 'transparent');
    $(this).parent('.label2').css('background', 'red');
});
.form-section {
background: orange;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-section">
    <form action="">
        <div class="first">
            <label for="radio" class="label1">
                <input type="radio" class="rad1" name="rad">First
            </label>
        </div>
        <div class="second">
            <label for="radio" class="label2">
                <input type="radio" class="rad2" name="rad">Second
            </label>
        </div>
    </form>
</div>
<!------------SECTION-->
<div class="form-section">
    <form action="">
        <div class="first">
            <label for="radio" class="label1">
                <input type="radio" class="rad1" name="rad">First
            </label>
        </div>
        <div class="second">
            <label for="radio" class="label2">
                <input type="radio" class="rad2" name="rad">Second
            </label>
        </div>
    </form>
</div>
<!------------SECTION-->
<div class="form-section">
    <form action="">
        <div class="first">
            <label for="radio" class="label1">
                <input type="radio" class="rad1" name="rad">First
            </label>
        </div>
        <div class="second">
            <label for="radio" class="label2">
                <input type="radio" class="rad2" name="rad">Second
            </label>
        </div>
    </form>
</div>

我会这样做：

$('input[name="rad"]').click(function() {
  $(this).closest('form').find('label').css('background', 'transparent')
  $(this).parent().css('background', 'red');
});


$('input[name="rad"]').click(function() {
  $(this).closest('form').find('label').css('background', 'transparent')
  $(this).parent().css('background', 'red');
});
.form-section {
  background: orange;
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-section">
  <form action="">
    <div class="first">
      <label for="radio" class="label1">
        <input type="radio" class="rad1" name="rad">First
      </label>
    </div>
    <div class="second">
      <label for="radio" class="label2">
        <input type="radio" class="rad2" name="rad">Second
      </label>
    </div>
  </form>
</div>
<!------------SECTION-->
<div class="form-section">
  <form action="">
    <div class="first">
      <label for="radio" class="label1">
        <input type="radio" class="rad1" name="rad">First
      </label>
    </div>
    <div class="second">
      <label for="radio" class="label2">
        <input type="radio" class="rad2" name="rad">Second
      </label>
    </div>
  </form>
</div>
<!------------SECTION-->
<div class="form-section">
  <form action="">
    <div class="first">
      <label for="radio" class="label1">
        <input type="radio" class="rad1" name="rad">First
      </label>
    </div>
    <div class="second">
      <label for="radio" class="label2">
        <input type="radio" class="rad2" name="rad">Second
      </label>
    </div>
  </form>
</div>

添加和删除类可能也更好，而不是使用 .css（） 设置标签样式。

$('.rad1').click(function(){ 
   $(this).parent()
     .css('background','red');
});
$('.rad2').click(function(){
   $(this).closest('div')
     .prev().find('.label1')
     .css('background','transparent');
   $(this).parent()
     .css('background','red');
});

有很多更好的方法，但我遵循你的：

$('.rad1').click( function() {
    $(this).parent('.label1').css('background', 'red');
    $('.rad2').parent('.label2').css('background', 'transparent');
});
$('.rad2').click( function() {
    $(this).parent('.label2').css('background', 'red');
    $('.rad1').parent('.label1').css('background', 'transparent');
});

如果你对结构进行轻微的更改，这也可以在没有javascript的情况下完成，纯粹在CSS中。

我首先复制了 j08691 的代码片段，然后注释掉了 javascript 并移动了每个单选按钮的label，使其跟随而不是包含<input>。

更改后，您可以编写一个 CSS 选择器来定位标签（如果它是 :checked 单选按钮的同级）。未选中的按钮将保留其继承的橙色背景。

/*$('input[name="rad"]').click(function() {
  $(this).closest('form').find('label').css('background', 'transparent')
  $(this).parent().css('background', 'red');
});*/
.form-section {
  background: orange;
  border: 1px solid black;
}
.form-section input[type="radio"]:checked + label {
    background: red;
}
<div class="form-section">
  <form action="">
    <div class="first">
        <input type="radio" class="rad1" name="rad">
        <label for="radio" class="label1">First</label>
    </div>
    <div class="second">
        <input type="radio" class="rad2" name="rad">
        <label for="radio" class="label2">Second</label>
    </div>
  </form>
</div>
<!------------SECTION-->
<div class="form-section">
  <form action="">
    <div class="first">
        <input type="radio" class="rad1" name="rad">
        <label for="radio" class="label1">First</label>
    </div>
    <div class="second">
        <input type="radio" class="rad2" name="rad">
        <label for="radio" class="label2">Second</label>
    </div>
  </form>
</div>
<!------------SECTION-->
<div class="form-section">
  <form action="">
    <div class="first">
        <input type="radio" class="rad1" name="rad">
        <label for="radio" class="label1">First</label>
    </div>
    <div class="second">
        <input type="radio" class="rad2" name="rad">
        <label for="radio" class="label2">Second</label>
    </div>
  </form>
</div>

相关文章：