Question

我想为所有未被用户选择的单选按钮显示轮廓。

目前我有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>

等

Answer 1

为什么在代码中呢？你可以用一行CSS解决这个问题，不需要if分支。

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

或者，甚至更简单：

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

Answer 2

这应该有效：

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

Answer 3

这是一个有效的演示：

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

Answer 4

您需要通过“输入”选择输入使用 $（this）选择器：

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

显示所有未选中的单选按钮的轮廓

4 个答案: