未选中时单选按钮验证和突出显示

时间:2017-02-02 14:20:42

标签: jquery

我有一个验证单选按钮的功能:

$scope.validateForm = function() {
     var radios = document.getElementsByName( "variant" );
     var formValid = false;

     var i = 0;
     while (!formValid && i < radios.length) {
         if (radios[ i ].checked) formValid = true;
         i++;
     }

     if (!formValid)
        document.getElementById('variantA').style.color="red";
        document.getElementById('variantB').style.color="red";
        document.getElementById('variantD').style.color="red";

     return formValid;
}

此功能可将未经检查的无线电广播的颜色更改为红色。 当我检查其中一个无线电时,我想改回跨距的颜色。

1 个答案:

答案 0 :(得分:0)

您可以通过将颜色设置为null来取消设置颜色。

$scope.validateForm = function() {
  var radios = document.getElementsByName( "variant" );
  var formValid = false;

  var i = 0;
  while (!formValid && i < radios.length) {
    if (radios[ i ].checked) formValid = true;
      i++;
  }

  document.getElementById('variantA').style.color = formValid  ? null : "red";
  document.getElementById('variantB').style.color = formValid  ? null : "red";
  document.getElementById('variantD').style.color = formValid  ? null : "red";

  return formValid;
}