在所有未選中的單選按鈕上顯示輪廓

目前我有4對單選按鈕，以後可能會增加。我已經給出了單獨的單選按鈕選擇的代碼，它正在工作，但正在尋找一個代碼來動態測試div內的所有單選按鈕，然後突出顯示所有未被用戶選中的單選按鈕。

代碼：的Jquery：

$（文件）。就緒（函數（）{

$("#BtnContinue").click(function(){ 

if (!$('input[name="radio1"]').is(':checked')) { 
     $('input[name="radio1"]').css("outline","2px solid red"); 

} 

if (!$('input[name="direc"]').is(':checked')) { 
     $('input[name="direc"]').css("outline","2px solid red"); 

} 


}); 

});

HTML：

<input class="userChoice radio" type="radio" name="radio1" value="direnquiryonly"> 

<input class="userChoice radio" type="radio" name="direc" value="phonebookwithdirenquiry"> 

<input class="userChoice radio" type="radio" name="direc" value="direnquiryonly"> 
</div>

等

來源

2017-10-11 user3774781

這裏是一個工作演示：

$(document).ready(function() { 
 

 
    $("#BtnContinue").click(function() { 
 
    updateOutlines(); 
 
    }); 
 

 
    $('input:radio').click(updateOutlines); 
 
}); 
 

 
function updateOutlines() { 
 
    $('input:radio').css('outline', 'none'); 
 
    $('input:radio').each(function() { 
 
    if (!$(this).is(':checked') && !$('input:radio[name="' + $(this).attr('name') + '"]').is(":checked")) { 
 
     $(this).css("outline", "2px solid red"); 
 
    } 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input class="userChoice radio" type="radio" name="radio1" value="direnquiryonly"> 
 

 
<input class="userChoice radio" type="radio" name="direc" value="phonebookwithdirenquiry"> 
 

 
<input class="userChoice radio" type="radio" name="direc" value="direnquiryonly"> 
 

 
<button id='BtnContinue'>continue</button>

來源

2017-10-11 08:45:25

感謝您的回答。但是有一個小問題。當我在顯示輪廓後選擇單選按鈕時，輪廓不會被刪除。 – user3774781

已更新代碼。 –

單擊繼續按鈕後，它將被刪除，但我期望用戶選擇收音機後即可隱藏輪廓。 – user3774781

您需要通過「類型」選擇您的輸入使用$（本）選擇：

if (!$('input[type="radio"]').is(':checked')) { 
     $(this).css("outline","2px solid red");

來源

2017-10-11 08:45:49

這應該工作：

$('input[type="radio"]').css("outline", "none"); 
$('input[type="radio"]').each(function(){ 
    if (!$(this).is(':checked')) { 
     $(this).css("outline", "2px solid red"); 
    } 
});

來源

2017-10-11 08:47:04

之前未選中的收音機突出顯示。感謝您的答覆。但是有一個小問題。當我在顯示輪廓後選擇一個單選按鈕時，輪廓不會刪除，這意味着在頁面加載後只有它正在工作 – user3774781

@ user3774781請查看我的更新答案。如果您已經使用了答案，請將其標記爲正確以幫助其他人。 –

我試過這段代碼。但選擇後不會刪除輪廓。 – user3774781

爲什麼這在代碼？你可以用一行CSS來解決這個問題，不需要分支。

input { outline: 2px solid red; } 
input:checked { outline: none; }

甚至更簡單：

input:not(:checked) { outline: 2px solid red; }

來源

2017-10-11 08:51:34 hunteke

在所有未選中的單選按鈕上顯示輪廓

回答

相關問題