2017-11-11 46 views
0

我使用三個單選按鈕作爲表單。使用jQuery,我試圖將類添加到具有單選按鈕的div。但它是針對所有的div,而不是隻針對檢查的div,而不是刪除unchecked div的類。目標類別通過單選按鈕選中

小提琴:https://jsfiddle.net/zqatxvgs/

的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"); 
} 
}); 

回答

1

您有一個通用選擇器,而不是將當前元素定位到父級。你應該嘗試一下thisparent

$('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>

+0

哇..你覺得呢?我無法停止這種想法。 –

+0

只是開玩笑的兄弟:) –

+0

謝謝你的回答。當收音機默認已被選中時,它不工作。檢查這個小提琴:https://jsfiddle.net/4tacqvrj/1/ – YOU

1

你必須使用$(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邏輯也是錯誤的。當一個又一個被選中

+0

謝謝你的回答。當收音機默認已被選中時,它不工作。檢查這個小提琴:https://jsfiddle.net/4tacqvrj/ – YOU

+0

@YOU只需添加一個類到最初的無線電廣播這是檢查像這樣https://jsfiddle.net/4tacqvrj/2/ –

0

只是遍歷父元素來選擇它和風格分配給它

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

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