Question

我正在为表单使用三个单选按钮。使用jQuery我试图将类添加到div，其中选中了单选按钮。但它的目标是所有div，而不是仅仅针对已检查的div而不是删除未经检查的div类。

HTML

<form action="">
<div class="field-box">  <input type="radio" name="gender" value="male">Male<br></div>
<div class="field-box">  <input type="radio" name="gender" value="female"> Female<br></div>
<div class="field-box">  <input type="radio" name="gender" value="other"> Other</div>

的jQuery

$('input:radio').change(function(){
if($(this).is(":checked")) {
    $('.field-box').addClass("option-selected");
} else {
    $('.field-box').removeClass("option-selected");
}
});

Answer 1

您有一个通用选择器，而不是将当前元素作为父目标。您应该使用GET /calendar/v3/calendars/user@gmail.com/events HTTP/1.1 Host: www.googleapis.com Content-length: 0 Authorization: Bearer ya29.GlsBBUxxxxxxxxxxXo-dF-Kexxxxxxxxxxxx0j_owVSaxxxxxxxxxWG-Xxxxxxxxxl和this

parent

$('input:radio').change(function(){
  $(".option-selected").removeClass("option-selected");
   if($(this).is(":checked")) {  
    $(this).parent().addClass("option-selected");
   }
});

.option-selected {
    background: yellowgreen;
}

Answer 2

您必须使用$(this)关键字，否则它会为所有div添加类，并且不需要if条件。你可以这样做

＆＃13;

$('input:radio').change(function() {
  $('.field-box').removeClass("option-selected");
  $(this).closest('.field-box').addClass("option-selected");
});

＆＃13;

.option-selected {
  background: yellowgreen;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
  <div class="field-box"> <input type="radio" name="gender" value="male"> Male<br></div>
  <div class="field-box"> <input type="radio" name="gender" value="female"> Female<br></div>
  <div class="field-box"> <input type="radio" name="gender" value="other"> Other</div>
</form>

＆＃13;

P.S 您if-else的逻辑也是错误的。当选中另一个类时，它永远不会从前一个类中删除

Answer 3

直接遍历父元素以选择它并为其指定样式

 $('input:radio').change(function(){
    if($(this).is(":checked")) {
        $(this).parent('.field-box').addClass("option-selected");
    } else {
        $(this).parent('.field-box').removeClass("option-selected");
    }
 });

Answer 4

非jquery方法

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Toggle Radio</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<style type="text/css">
  .option-selected {
  background: yellowgreen;
}
</style>

<form action="" name="genderForm">
<div class="field-box">  <input onchange="highlightRadio()" type="radio" name="gender" value="male"> Male<br></div>
<div class="field-box">  <input onchange="highlightRadio()" type="radio" name="gender" value="female"> Female<br></div>
<div class="field-box">  <input onchange="highlightRadio()" type="radio" name="gender" value="other"> Other</div>
</form>

<script type="text/javascript">
  function highlightRadio() {
    let activeRadioButton = document.querySelector('input[type = "radio"]:checked');
    let allRadioButton = document.querySelectorAll('input[type = "radio"]');
    for(i=0;i<allRadioButton.length;i++) {
      allRadioButton[i].parentElement.classList.remove('option-selected');
    }
    activeRadioButton.parentElement.classList.add('option-selected');    
    return false;
  }
</script>

</body>
</html>

Target Class通过单选按钮选中

4 个答案: