Question

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

应检查每行中的一个复选框。

我尝试使用以下代码： -

 $(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;
      });
  });

使用上面的代码，如果我从18行检查3行，它就可以工作了。但是当我检查gridview的所有18行时，它仍然会给我警告信息。

请让我知道代码出了什么问题

以下是gridview的图像

[！[截图] [1] [1]

在下面的小提琴中添加了代码

https://jsfiddle.net/Lg0ooot2/

Answer 1

使用tr选择器，使用:radio选择器查找所有无线电元素。使用.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

gridview中的Checbox检查条件在javascript中不能正常工作

1 个答案: