jquery - 如果未选中单选框，如何验证单选框的数量并突出显示它？

Question

$(document).ready(function() 
{
    $('#showme').click(function() {
        validateNresult() ;
    })
   
});

function validateNresult() 
{
        var names = []
        $('.allrb').each(function () {
            var rname = $(this).attr('name');
            if ($.inArray(rname, names) == -1) names.push(rname);
        });

        $.each(names, function (i, name) {
            if ($('input[name="' + name + '"]:checked').length == 0) 
            {
                $(this).addClass("invalid");
            }

            else
            {
                $(this).removeClass("invalid");
            }

        });
}

input[type=radio] {
      position: absolute;
      visibility: hidden;
      display: inline-block;
    }

    label {
      color: #9a929e;
      display: inline-block;
      cursor: pointer;
      font-weight: bold;
      padding: 5px 20px;
      margin: auto;
    }

    input[type=radio]:checked + label {
      color: #ccc8ce;
      background: #675f6b;
      margin: auto;
    }

    label + input[type=radio] + label {
      border-left: solid 3px #675f6b;
    }

    .radio-group {
      border: solid 3px #675f6b;
      display: inline-block;
      margin: 10px;
      border-radius: 10px;
      overflow: hidden;
    font-family: roboto;
    }

    table
    {
        margin-top: 20px;
    }

    #tab td
    {
        vertical-align:middle;
    }
	
	ul li
	{
		list-style-type: none;
		display: inline-block;
	}
	
	ul li input
	{
		text-align: center;
	}

    .invalid 
    {
      outline: 1px solid red;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-responsive table-striped table-hover " id="tab">
  <tbody>
    <tr id="alertr1" name="v">
      <td width="30px">1</td>
      <td width="200px">Content</td>
      <td width="75px;">
        <div class="radio-group">
          <input type="radio" id="option-one" name="r1" class="allrb thinker" value="5"><label for="option-one">A</label><input type="radio" id="option-two" name="r1" class="allrb thinker" value="4"><label for="option-two">B</label><input type="radio"
            id="option-three" name="r1" class="allrb thinker" value="3"><label for="option-three">C</label><input type="radio" id="option-four" name="r1" class="allrb thinker" value="2"><label for="option-four">D</label><input type="radio" id="option-five"
            name="r1" class="allrb thinker" value="1"><label for="option-five">E</label>
        </div>
      </td>
    </tr>

    <tr id="alertr2" name="v">
      <td width="30px">2</td>
      <td width="200px">Content</td>
      <td width="75px;">
        <div class="radio-group">
          <input type="radio" id="option-one2" name="r2" class="allrb expresser" value="5"><label for="option-one2">A</label><input type="radio" id="option-two2" name="r2" class="allrb expresser" value="4"><label for="option-two2">B</label><input type="radio"
            id="option-three2" name="r2" class="allrb expresser" value="3"><label for="option-three2">C</label><input type="radio" id="option-four2" name="r2" class="allrb expresser" value="2"><label for="option-four2">D</label><input type="radio" id="option-five2"
            name="r2" class="allrb expresser" value="1"><label for="option-five2">E</label>
        </div>
      </td>
    </tr>

    <tr id="alertr3" name="v">
      <td width="30px">3</td>
      <td width="200px">Content</td>
      <td width="75px;">
        <div class="radio-group">
          <input type="radio" id="option-one3" name="r3" class="allrb director" value="1"><label for="option-one3">A</label><input type="radio" id="option-two3" name="r3" class="allrb director" value="2"><label for="option-two3">B</label><input type="radio"
            id="option-three3" name="r3" class="allrb director" value="3"><label for="option-three3">C</label><input type="radio" id="option-four3" name="r3" class="allrb director" value="4"><label for="option-four3">D</label><input type="radio" id="option-five3"
            name="r3" class="allrb director" value="5"><label for="option-five3">E</label>
        </div>
      </td>
    </tr>

    <tr id="alertr4" name="v">
      <td width="30px">4</td>
      <td width="200px">Content</td>
      <td width="75px;">
        <div class="radio-group">
          <input type="radio" id="option-one4" name="r4" class="allrb harmonizer" value="5"><label for="option-one4">A</label><input type="radio" id="option-two4" name="r4" class="allrb harmonizer" value="4"><label for="option-two4">B</label><input type="radio"
            id="option-three4" name="r4" class="allrb harmonizer" value="3"><label for="option-three4">C</label><input type="radio" id="option-four4" name="r4" class="allrb harmonizer" value="2"><label for="option-four4">D</label><input type="radio" id="option-five4"
            name="r4" class="allrb harmonizer" value="1"><label for="option-five4">E</label>
        </div>
      </td>
    </tr>

    <tr id="alertr5" name="v">
      <td width="30px">5</td>
      <td width="200px">Content</td>
      <td width="75px;">
        <div class="radio-group">
          <input type="radio" id="option-one5" name="r5" class="allrb thinker" value="5"><label for="option-one5">A</label><input type="radio" id="option-two5" name="r5" class="allrb thinker" value="4"><label for="option-two5">B</label><input type="radio"
            id="option-three5" name="r5" class="allrb thinker" value="3"><label for="option-three5">C</label><input type="radio" id="option-four5" name="r5" class="allrb thinker" value="2"><label for="option-four5">D</label><input type="radio" id="option-five5"
            name="r5" class="allrb thinker" value="1"><label for="option-five5">E</label>
        </div>
      </td>
    </tr>

    <tr id="alertr6" name="v">
      <td width="30px">6</td>
      <td width="200px">Content</td>
      <td width="75px;">
        <div class="radio-group">
          <input type="radio" id="option-one6" name="r6" class="allrb director" value="1"><label for="option-one6">A</label><input type="radio" id="option-two6" name="r6" class="allrb director" value="2"><label for="option-two6">B</label><input type="radio"
            id="option-three6" name="r6" class="allrb director" value="3"><label for="option-three6">C</label><input type="radio" id="option-four6" name="r6" class="allrb director" value="4"><label for="option-four6">D</label><input type="radio" id="option-five6"
            name="r6" class="allrb director" value="5"><label for="option-five6">E</label>
        </div>
      </td>
    </tr>

    <tr id="alertr7" name="v">
      <td width="30px">7</td>
      <td width="200px">Content</td>
      <td width="75px;">
        <div class="radio-group">
          <input type="radio" id="option-one7" name="r7" class="allrb thinker" value="5"><label for="option-one7">A</label><input type="radio" id="option-two7" name="r7" class="allrb thinker" value="4"><label for="option-two7">B</label><input type="radio"
            id="option-three7" name="r7" class="allrb thinker" value="3"><label for="option-three7">C</label><input type="radio" id="option-four7" name="r7" class="allrb thinker" value="2"><label for="option-four7">D</label><input type="radio" id="option-five7"
            name="r7" class="allrb thinker" value="1"><label for="option-five7">E</label>
        </div>
      </td>
    </tr>

    <tr id="alertr8" name="v">
      <td width="30px">8</td>
      <td width="200px">Content</td>
      <td width="75px;">
        <div class="radio-group">
          <input type="radio" id="option-one8" name="r8" class="allrb expresser" value="1"><label for="option-one8">A</label><input type="radio" id="option-two8" name="r8" class="allrb expresser" value="2"><label for="option-two8">B</label><input type="radio"
            id="option-three8" name="r8" class="allrb expresser" value="3"><label for="option-three8">C</label><input type="radio" id="option-four8" name="r8" class="allrb expresser" value="4"><label for="option-four8">D</label><input type="radio" id="option-five8"
            name="r8" class="allrb expresser" value="5"><label for="option-five8">E</label>
        </div>
      </td>
    </tr>

    <tr id="alertr9" name="v">
      <td width="30px">9</td>
      <td width="200px">Content</td>
      <td width="75px;">
        <div class="radio-group">
          <input type="radio" id="option-one9" name="r9" class="allrb harmonizer" value="1"><label for="option-one9">A</label><input type="radio" id="option-two9" name="r9" class="allrb harmonizer" value="2"><label for="option-two9">B</label><input type="radio"
            id="option-three9" name="r9" class="allrb harmonizer" value="3"><label for="option-three9">C</label><input type="radio" id="option-four9" name="r9" class="allrb harmonizer" value="4"><label for="option-four9">D</label><input type="radio" id="option-five9"
            name="r9" class="allrb harmonizer" value="5"><label for="option-five9">E</label>
        </div>
      </td>
    </tr>

  </tbody>
</table>

<button class="btn btn-primary" id="showme" type="button">View Result</button>

我有 32 个具有不同名称的单选按钮必须进行验证。我已经对我的代码进行了一些研究和更改，但它对我不起作用。如果用户未选择单选框，我想将整个表格行突出显示为红色，则应在获得结果之前选择所有单选框。有人可以告诉我正确的方法吗？谢谢。

我还尝试使用 document.getElementsByName(name).style.outline = "thin Solid red"; 但它向我显示了错误

Cannot set property 'outline' of undefined

Answer 1

检查下面的代码是否有帮助!如果没有选中任何复选框，它将突出显示整个 div。

如果您想突出显示复选框，请考虑取消注释/注释添加/删除类的代码中的行。

$(document).ready(function() {
  $('#showme').click(function() {
    validateNresult();
  })

});

function validateNresult() {
 
  $('.allrb').each(function() {
    var rname = $(this).attr('name');
    var parentDiv = $(this).parents("div");
    if (parentDiv.find("[name='" + rname + "']:checked").length > 0) {
      parentDiv.removeClass("invalid");//to highlight div
      //$(this).next("label").removeClass("invalid");//to highlight around checkbox
    } else {
      parentDiv.addClass("invalid");
      //$(this).next("label").addClass("invalid");
      
    }

  });

}

input[type=radio] {
  position: absolute;
  visibility: hidden;
  display: inline-block;
}

label {
  color: #9a929e;
  display: inline-block;
  cursor: pointer;
  font-weight: bold;
  padding: 5px 20px;
  margin: auto;
}

input[type=radio]:checked+label {
  color: #ccc8ce;
  background: #675f6b;
  margin: auto;
}

label+input[type=radio]+label {
  border-left: solid 3px #675f6b;
}

.radio-group {
  border: solid 3px #675f6b;
  display: inline-block;
  margin: 10px;
  border-radius: 10px;
  overflow: hidden;
  font-family: roboto;
}

table {
  margin-top: 20px;
}

#tab td {
  vertical-align: middle;
}

ul li {
  list-style-type: none;
  display: inline-block;
}

ul li input {
  text-align: center;
}

.invalid {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-responsive table-striped table-hover " id="tab">
  <tbody>
    <tr id="alertr1" name="v">
      <td width="30px">1</td>
      <td width="200px">Content</td>
      <td width="75px;">
        <div class="radio-group">
          <input type="radio" id="option-one" name="r1" class="allrb thinker" value="5"><label for="option-one">A</label><input type="radio" id="option-two" name="r1" class="allrb thinker" value="4"><label for="option-two">B</label><input type="radio"
            id="option-three" name="r1" class="allrb thinker" value="3"><label for="option-three">C</label><input type="radio" id="option-four" name="r1" class="allrb thinker" value="2"><label for="option-four">D</label><input type="radio" id="option-five"
            name="r1" class="allrb thinker" value="1"><label for="option-five">E</label>
        </div>
      </td>
    </tr>

    <tr id="alertr2" name="v">
      <td width="30px">2</td>
      <td width="200px">Content</td>
      <td width="75px;">
        <div class="radio-group">
          <input type="radio" id="option-one2" name="r2" class="allrb expresser" value="5"><label for="option-one2">A</label><input type="radio" id="option-two2" name="r2" class="allrb expresser" value="4"><label for="option-two2">B</label><input type="radio"
            id="option-three2" name="r2" class="allrb expresser" value="3"><label for="option-three2">C</label><input type="radio" id="option-four2" name="r2" class="allrb expresser" value="2"><label for="option-four2">D</label><input type="radio" id="option-five2"
            name="r2" class="allrb expresser" value="1"><label for="option-five2">E</label>
        </div>
      </td>
    </tr>

    <tr id="alertr3" name="v">
      <td width="30px">3</td>
      <td width="200px">Content</td>
      <td width="75px;">
        <div class="radio-group">
          <input type="radio" id="option-one3" name="r3" class="allrb director" value="1"><label for="option-one3">A</label><input type="radio" id="option-two3" name="r3" class="allrb director" value="2"><label for="option-two3">B</label><input type="radio"
            id="option-three3" name="r3" class="allrb director" value="3"><label for="option-three3">C</label><input type="radio" id="option-four3" name="r3" class="allrb director" value="4"><label for="option-four3">D</label><input type="radio" id="option-five3"
            name="r3" class="allrb director" value="5"><label for="option-five3">E</label>
        </div>
      </td>
    </tr>

    <tr id="alertr4" name="v">
      <td width="30px">4</td>
      <td width="200px">Content</td>
      <td width="75px;">
        <div class="radio-group">
          <input type="radio" id="option-one4" name="r4" class="allrb harmonizer" value="5"><label for="option-one4">A</label><input type="radio" id="option-two4" name="r4" class="allrb harmonizer" value="4"><label for="option-two4">B</label><input type="radio"
            id="option-three4" name="r4" class="allrb harmonizer" value="3"><label for="option-three4">C</label><input type="radio" id="option-four4" name="r4" class="allrb harmonizer" value="2"><label for="option-four4">D</label><input type="radio" id="option-five4"
            name="r4" class="allrb harmonizer" value="1"><label for="option-five4">E</label>
        </div>
      </td>
    </tr>

    <tr id="alertr5" name="v">
      <td width="30px">5</td>
      <td width="200px">Content</td>
      <td width="75px;">
        <div class="radio-group">
          <input type="radio" id="option-one5" name="r5" class="allrb thinker" value="5"><label for="option-one5">A</label><input type="radio" id="option-two5" name="r5" class="allrb thinker" value="4"><label for="option-two5">B</label><input type="radio"
            id="option-three5" name="r5" class="allrb thinker" value="3"><label for="option-three5">C</label><input type="radio" id="option-four5" name="r5" class="allrb thinker" value="2"><label for="option-four5">D</label><input type="radio" id="option-five5"
            name="r5" class="allrb thinker" value="1"><label for="option-five5">E</label>
        </div>
      </td>
    </tr>

    <tr id="alertr6" name="v">
      <td width="30px">6</td>
      <td width="200px">Content</td>
      <td width="75px;">
        <div class="radio-group">
          <input type="radio" id="option-one6" name="r6" class="allrb director" value="1"><label for="option-one6">A</label><input type="radio" id="option-two6" name="r6" class="allrb director" value="2"><label for="option-two6">B</label><input type="radio"
            id="option-three6" name="r6" class="allrb director" value="3"><label for="option-three6">C</label><input type="radio" id="option-four6" name="r6" class="allrb director" value="4"><label for="option-four6">D</label><input type="radio" id="option-five6"
            name="r6" class="allrb director" value="5"><label for="option-five6">E</label>
        </div>
      </td>
    </tr>

    <tr id="alertr7" name="v">
      <td width="30px">7</td>
      <td width="200px">Content</td>
      <td width="75px;">
        <div class="radio-group">
          <input type="radio" id="option-one7" name="r7" class="allrb thinker" value="5"><label for="option-one7">A</label><input type="radio" id="option-two7" name="r7" class="allrb thinker" value="4"><label for="option-two7">B</label><input type="radio"
            id="option-three7" name="r7" class="allrb thinker" value="3"><label for="option-three7">C</label><input type="radio" id="option-four7" name="r7" class="allrb thinker" value="2"><label for="option-four7">D</label><input type="radio" id="option-five7"
            name="r7" class="allrb thinker" value="1"><label for="option-five7">E</label>
        </div>
      </td>
    </tr>

    <tr id="alertr8" name="v">
      <td width="30px">8</td>
      <td width="200px">Content</td>
      <td width="75px;">
        <div class="radio-group">
          <input type="radio" id="option-one8" name="r8" class="allrb expresser" value="1"><label for="option-one8">A</label><input type="radio" id="option-two8" name="r8" class="allrb expresser" value="2"><label for="option-two8">B</label><input type="radio"
            id="option-three8" name="r8" class="allrb expresser" value="3"><label for="option-three8">C</label><input type="radio" id="option-four8" name="r8" class="allrb expresser" value="4"><label for="option-four8">D</label><input type="radio" id="option-five8"
            name="r8" class="allrb expresser" value="5"><label for="option-five8">E</label>
        </div>
      </td>
    </tr>

    <tr id="alertr9" name="v">
      <td width="30px">9</td>
      <td width="200px">Content</td>
      <td width="75px;">
        <div class="radio-group">
          <input type="radio" id="option-one9" name="r9" class="allrb harmonizer" value="1"><label for="option-one9">A</label><input type="radio" id="option-two9" name="r9" class="allrb harmonizer" value="2"><label for="option-two9">B</label><input type="radio"
            id="option-three9" name="r9" class="allrb harmonizer" value="3"><label for="option-three9">C</label><input type="radio" id="option-four9" name="r9" class="allrb harmonizer" value="4"><label for="option-four9">D</label><input type="radio" id="option-five9"
            name="r9" class="allrb harmonizer" value="5"><label for="option-five9">E</label>
        </div>
      </td>
    </tr>

  </tbody>
</table>

<button class="btn btn-primary" id="showme" type="button">View Result</button>