javascript - gridview 内的复选框检查条件未按 JavaScript 中的要求工作

Question

我有一个GRIDVIEW，其中有18行，我想要的是

Atleast one checkbox from each row should be checked.

我尝试使用以下代码:-

 $(function () {
      $("#CmdSave1").click(function () {
          for (i = 1; i <= 18; i++) {
              if (typeof $(".row-" + i + ":checked").val() == "undefined")
                  $(".row-" + i).closest("tr").addClass("error");
          }
          if ($(".error").length > 0)
              alert("Select the checkbox from each row");
          return false;
      });
  });

with the above code, it is working if I check 3 rows from 18 rows. But when I check all the 18 rows of the gridview, it still giving me the alert message.

请告诉我代码出了什么问题

下面是 GridView 的图像

[![屏幕截图][1]][1]

在下面的 fiddle 中添加了代码

<强> https://jsfiddle.net/Lg0ooot2/

Answer 1

Use tr selector and find all the radio elements using :radio selector. Filter them out using .filter.

如果检查的单选元素的长度为0，则添加error类或删除

试试这个:

$(function() {
  $(".btn").click(function() {
    $('tr').each(function() {
      var len = $(this).find(':radio').filter(function() {
        return this.checked;
      }).length;
      if (!len) {
        $(this).addClass("error")
      } else {
        $(this).removeClass("error")
      }
    })
  })
});

td {
  border: 1px solid #999;
  text-align: center;
}
tr.error td {
  background-color: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th></th>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Row 1</th>
      <td>
        <input type="radio" name="row-1" class="row-1" value="1">
      </td>
      <td>
        <input type="radio" name="row-1" class="row-1" value="2">
      </td>
      <td>
        <input type="radio" name="row-1" class="row-1" value="3">
      </td>
      <td>
        <input type="radio" name="row-1" class="row-1" value="4">
      </td>
    </tr>
    <tr>
      <th>Row 2</th>
      <td>
        <input type="radio" name="row-2" class="row-2" value="1">
      </td>
      <td>
        <input type="radio" name="row-2" class="row-2" value="2">
      </td>
      <td>
        <input type="radio" name="row-2" class="row-2" value="3">
      </td>
      <td>
        <input type="radio" name="row-2" class="row-2" value="4">
      </td>
    </tr>
    <tr>
      <th>Row 3</th>
      <td>
        <input type="radio" name="row-3" class="row-3" value="1">
      </td>
      <td>
        <input type="radio" name="row-3" class="row-3" value="2">
      </td>
      <td>
        <input type="radio" name="row-3" class="row-3" value="3">
      </td>
      <td>
        <input type="radio" name="row-3" class="row-3" value="4">
      </td>
    </tr>
    <tr>
      <th>Row 4</th>
      <td>
        <input type="radio" name="row-4" class="row-4" value="1">
      </td>
      <td>
        <input type="radio" name="row-4" class="row-4" value="2">
      </td>
      <td>
        <input type="radio" name="row-4" class="row-4" value="3">
      </td>
      <td>
        <input type="radio" name="row-4" class="row-4" value="4">
      </td>
    </tr>
    <tr>
      <th>Row 5</th>
      <td>
        <input type="radio" name="row-5" class="row-5" value="1">
      </td>
      <td>
        <input type="radio" name="row-5" class="row-5" value="2">
      </td>
      <td>
        <input type="radio" name="row-5" class="row-5" value="3">
      </td>
      <td>
        <input type="radio" name="row-5" class="row-5" value="4">
      </td>
    </tr>
    <tr>
      <th>Row 6</th>
      <td>
        <input type="radio" name="row-6" class="row-6" value="1">
      </td>
      <td>
        <input type="radio" name="row-6" class="row-6" value="2">
      </td>
      <td>
        <input type="radio" name="row-6" class="row-6" value="3">
      </td>
      <td>
        <input type="radio" name="row-6" class="row-6" value="4">
      </td>
    </tr>
    <tr>
      <th>Row 7</th>
      <td>
        <input type="radio" name="row-7" class="row-7" value="1">
      </td>
      <td>
        <input type="radio" name="row-7" class="row-7" value="2">
      </td>
      <td>
        <input type="radio" name="row-7" class="row-7" value="3">
      </td>
      <td>
        <input type="radio" name="row-7" class="row-7" value="4">
      </td>
    </tr>
    <tr>
      <th>Row 8</th>
      <td>
        <input type="radio" name="row-8" class="row-8" value="1">
      </td>
      <td>
        <input type="radio" name="row-8" class="row-8" value="2">
      </td>
      <td>
        <input type="radio" name="row-8" class="row-8" value="3">
      </td>
      <td>
        <input type="radio" name="row-8" class="row-8" value="4">
      </td>
    </tr>
    <tr>
      <th>Row 9</th>
      <td>
        <input type="radio" name="row-9" class="row-9" value="1">
      </td>
      <td>
        <input type="radio" name="row-9" class="row-9" value="2">
      </td>
      <td>
        <input type="radio" name="row-9" class="row-9" value="3">
      </td>
      <td>
        <input type="radio" name="row-9" class="row-9" value="4">
      </td>
    </tr>
    <tr>
      <th>Row 10</th>
      <td>
        <input type="radio" name="row-10" class="row-10" value="1">
      </td>
      <td>
        <input type="radio" name="row-10" class="row-10" value="2">
      </td>
      <td>
        <input type="radio" name="row-10" class="row-10" value="3">
      </td>
      <td>
        <input type="radio" name="row-10" class="row-10" value="4">
      </td>
    </tr>
  </tbody>
</table>
<input type="button" value="Click" class="btn">

Fiddle here