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

我使用三个单选按钮作为表单。使用jQuery，我试图将类添加到具有单选按钮的div。但它是针对所有的div，而不是只针对检查的div，而不是删除unchecked 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"); 
} 
});

来源

2017-11-11 YOU

您有一个通用选择器，而不是将当前元素定位到父级。你应该尝试一下this和parent

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

.option-selected { 
 
    background: yellowgreen; 
 
}

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

来源

2017-11-11 17:52:32

哇..你觉得呢？我无法停止这种想法。 –

只是开玩笑的兄弟:) –

谢谢你的回答。当收音机默认已被选中时，它不工作。检查这个小提琴：https://jsfiddle.net/4tacqvrj/1/ – YOU

你必须使用$(this)关键字否则它会添加类所有div和没有必要的if条件。你可以简单地做这样的

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

.option-selected { 
 
    background: yellowgreen; 
 
}

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

P.S你的if-else逻辑也是错误的。当一个又一个被选中

来源

2017-11-11 17:52:48

谢谢你的回答。当收音机默认已被选中时，它不工作。检查这个小提琴：https：//jsfiddle.net/4tacqvrj/ – YOU

@YOU只需添加一个类到最初的无线电广播这是检查像这样https://jsfiddle.net/4tacqvrj/2/ –

只是遍历父元素来选择它和风格分配给它

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

来源

2017-11-11 17:57:14 samehanwar

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

来源

2017-11-11 18:47:26

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

回答

相关问题