Javascript 通过单选按钮选中目标类_Javascript_Jquery_Html

Javascript 通过单选按钮选中目标类

javascript jquery html

Javascript 通过单选按钮选中目标类,javascript,jquery,html,Javascript,Jquery,Html,我正在使用三个单选按钮作为表单。使用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-b

我正在使用三个单选按钮作为表单。使用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>

您有一个通用选择器，而不是针对当前的父元素。你应该玩转

这个

和

家长

$（'input:radio'）。更改（函数（）{
$（“.option selected”）.removeClass（“option selected”）；
如果（$（this）.is（“：checked”）{
$（this.parent（）.addClass（“选择的选项”）；
}
});
。已选择选项{
背景：黄绿色；
}

男性

女性

其他
您有一个通用选择器，而不是针对当前的父元素。你应该玩转这个
和家长


$（'input:radio'）。更改（函数（）{
$（“.option selected”）.removeClass（“option selected”）；
如果（$（this）.is（“：checked”）{
$（this.parent（）.addClass（“选择的选项”）；
}
});
。已选择选项{
背景：黄绿色；
}

男性

女性

其他
您必须使用$（this）
关键字，否则它将向所有div
添加类，并且不需要if
条件。你可以这样做

$（'input:radio'）。更改（函数（）{
$（'.field box'）.removeClass（“选择选项”）；
$（this）.closest（'.field box'）.addClass（“所选选项”）；
});
。已选择选项{
背景：黄绿色；
}

男性

女性

其他
您必须使用$（this）
关键字，否则它将向所有div
添加类，并且不需要if
条件。你可以这样做

$（'input:radio'）。更改（函数（）{
$（'.field box'）.removeClass（“选择选项”）；
$（this）.closest（'.field box'）.addClass（“所选选项”）；
});
。已选择选项{
背景：黄绿色；
}

男性

女性

其他
只需遍历父元素以选择它并为其指定样式
 $('input:radio').change(function(){
    if($(this).is(":checked")) {
        $(this).parent('.field-box').addClass("option-selected");
    } else {
        $(this).parent('.field-box').removeClass("option-selected");
    }
 });

只需遍历父元素以选择它并为其指定样式
 $('input:radio').change(function(){
    if($(this).is(":checked")) {
        $(this).parent('.field-box').addClass("option-selected");
    } else {
        $(this).parent('.field-box').removeClass("option-selected");
    }
 });

非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>


切换收音机
.选择的选项{
背景：黄绿色；
}
男性

女性

其他
函数highlightRadio（）{
让activeRadioButton=document.querySelector（'input[type=“radio”]：checked'）；
让allRadioButton=document.querySelectorAll（'input[type=“radio”]”）；
对于（i=0；i非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>


切换收音机
.选择的选项{
背景：黄绿色；
}
男性

女性

其他
函数highlightRadio（）{
让activeRadioButton=document.querySelector（'input[type=“radio”]：checked'）；
让allRadioButton=document.querySelectorAll（'input[type=“radio”]”）；
对于（i=0；我知道..你有这样的感觉吗？我无法停止这个想法。开玩笑的兄弟：）谢谢你的回答。当收音机已经默认检查时，它不工作。检查这个小提琴：哇..你有这样的感觉吗？我无法停止那个想法。开玩笑的兄弟：）谢谢你的回答。当收音机已经默认选中时，它不工作。检查此提琴：谢谢你的回答。当收音机已经默认选中时，它不工作。检查此提琴：@你只需将一个类最初添加到div中，以检查收音机，如下所示谢谢你的回答。当r默认情况下，adio已被选中。请选中此提琴：@您只需在div中添加一个类，最初用于如下选中的收音机