Question

我有以下示例，其中可以突出显示特定列的选择值。有时我需要为同一列使用两个表单（因此具有相同的表单ID），但是当我尝试这样做时它不起作用。还有其他解决方案吗？

我的jsfiddle示例： https://jsfiddle.net/1mt7ojL0/在此示例中，Values.II表单不起作用。

// JavaScript Document
$(document).ready(function() {

  $('.selector').each(function() {
    $(this).on('click', check);
  });
  $('.all').each(function() {
    $(this).on('click', all);
  });

  function all(event) {

    if ($(this).is(':checked')) {
      $("input:checkbox:not(:checked)", $(this).parents('form')).not(this).prop("checked", "checked");
    } else {
      $("input:checkbox(:checked)", $(this).parents('form')).not(this).prop("checked", "");
    }

    //$('.selector').prop("checked", this.name === "SelectAll");

    check(event);
  }

  function check(event) {
    var checked = $(".selector:checked").map(function() {
      return this.name
    }).get()
    $('td').removeClass("highlight").filter(function() {
      return $.inArray($(this).text(), checked) >= 0 &&
        $('#form' + ($(this).index() + 1)).find('[name="' + $(this).text() + '"]').is(":checked")
    }).addClass("highlight")
    if ($(this).is(".selector"))
      $('.all').not(this).prop("checked", false)

  }


  $("#Hidden").on("click", function() {
    $(".selector").toggle();
  });



});

.highlight {
  background: #9ac99d;
}

.tbresult td {
  padding: 1px;
  margin: 1px;
  border: 1px solid #ccc;
  text-align: center;
  height: 15px;
  width: 8px;
  white-space: nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Values.I</p>

<form id="form1" name="form" method="post" action="">
  <label><input type="checkbox" name="SelectAll" class="all" />All</label>
  <label><input type="checkbox" name="8" class="selector" />8</label>
  <label><input type="checkbox" name="9" class="selector" />9</label>
  <label><input type="checkbox" name="10" class="selector" />10</label>
</form>

<p>Values.II</p>

<form id="form1" name="form" method="post" action="">
  <label><input type="checkbox" name="SelectAll" class="all" />All</label>
  <label><input type="checkbox" name="1" class="selector" />1</label>
  <label><input type="checkbox" name="6" class="selector" />6</label>
  <label><input type="checkbox" name="7" class="selector" />7</label>
  <label><input type="checkbox" name="8" class="selector" />8</label>
</form>

<p>Values.III</p>

<form id="form2" name="form" method="post" action="">
  <label><input type="checkbox" name="SelectAll" class="all" />All</label>
  <label><input type="checkbox" name="7" class="selector" />7</label>
  <label><input type="checkbox" name="9" class="selector" />9</label>
</form>

<p>Values.IV</p>

<form id="form3" name="form" method="post" action="">
  <label><input type="checkbox" name="SelectAll" class="all" />All</label>
  <label><input type="checkbox" name="12" class="selector" />12</label>
  <label><input type="checkbox" name="14" class="selector" />14</label>
</form>
<div>
  <table class="tbresult">
    <tr>

      <th>Sdv</th>
      <th>Med</th>
      <th>Mod</th>
    </tr>

    <tr>

      <td>4</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>

      <td>7</td>
      <td>8</td>
      <td>15</td>
    </tr>
    <tr>

      <td>8</td>
      <td>6</td>
      <td>14</td>
    </tr>
    <tr>

      <td>9</td>
      <td>10</td>
      <td>14</td>
    </tr>
    <tr>

      <td>8</td>
      <td>7</td>
      <td>14</td>
    </tr>
    <tr>

      <td>10</td>
      <td>9</td>
      <td>12</td>
    </tr>
    <tr>

      <td>10</td>
      <td>9</td>
      <td>15</td>
    </tr>
    <tr>

      <td>8</td>
      <td>9</td>
      <td>13</td>
    </tr>
    <tr>

      <td>6</td>
      <td>5</td>
      <td>10</td>
    </tr>
    <tr>

      <td>9</td>
      <td>8</td>
      <td>15</td>
    </tr>
    <tr>

      <td>5</td>
      <td>7</td>
      <td>8</td>
    </tr>
    <tr>

      <td>10</td>
      <td>8</td>
      <td>13</td>
    </tr>
    <tr>

      <td>9</td>
      <td>12</td>
      <td>13</td>
    </tr>
    <tr>

      <td>6</td>
      <td>6</td>
      <td>10</td>
    </tr>
    <tr>

      <td>8</td>
      <td>9</td>
      <td>13</td>
    </tr>
    <tr>

      <td>8</td>
      <td>7</td>
      <td>11</td>
    </tr>
    <tr>

      <td>9</td>
      <td>8</td>
      <td>15</td>
    </tr>
    <tr>

      <td>13</td>
      <td>14</td>
      <td>16</td>
    </tr>
    <tr>

      <td>9</td>
      <td>9</td>
      <td>10</td>
    </tr>
  </table>
</div>

Answer 1

我在link

上从Jakecigar得到了解决此问题的方法

Ids have to be unique. Don’t use them for your "form"s.
https://jsfiddle.net/jakecigar/1mt7ojL0/41/ <--

<form data-for="1"> …

Jquery：

// JavaScript Document
$(document).ready(function() {

  $('.selector').each(function() {
    $(this).on('click', check);
  });
  $('.all').each(function() {
    $(this).on('click', all);
  });

  function all(event) {

    if ($(this).is(':checked')) {
      $("input:checkbox:not(:checked)", $(this).parents('form')).not(this).prop("checked", true);
    } else {
      $("input:checkbox(:checked)", $(this).parents('form')).not(this).prop("checked", false);
    }

    //$('.selector').prop("checked", this.name === "SelectAll");

    check(event);
  }

  function check(event) {
    var checked = $(".selector:checked").map(function() {
      return this.name
    }).get()
    $('td').removeClass("highlight").filter(function() {
      return $.inArray($(this).text(), checked) >= 0 &&
        $('[data-for="' + ($(this).index() + 1) + '"]').find('[name="' + $(this).text() + '"]').is(":checked")
    }).addClass("highlight")
    if ($(this).is(".selector"))
      $('.all').not(this).prop("checked", false)

  }    

  $("#Hidden").on("click", function() {
    $(".selector").toggle();
  });    

});

用多种形式突出显示特定的列数据

1 个答案: