Question

经过所有建议后，这就是我所提出的。但是，如果我有 100 美元而不是 100 美元，我是否可以将其转换为数字？

  var selectedRows = document.getElementsByClassName('selected');
 limit = 0; //set limit

checkboxes = document.querySelectorAll('.checkboxdiv input[type="checkbox"]');
function checker(elem) {
  if (elem.checked) {
    limit++;
  } else {
    limit--;
  }

  for (i = 0; i < checkboxes.length; i++) { 

    if (limit == 2) {
      if (!checkboxes[i].checked) {
        checkboxes[i].disabled = true;

      }

    } else {

      if (!checkboxes[i].checked) {
        checkboxes[i].disabled = false;
      }

    }
  }

}

for (i = 0; i < checkboxes.length; i++) {
  checkboxes[i].onclick = function() { 
    checker(this);
  }
}
  function inputChanged(event) {
  event.target.parentElement.parentElement.className =
    event.target.checked ? 'selected' : '';
}
function Calculate() {
  var cal = 0;
  for (var i = 0; i < selectedRows.length-1; i++) {
    cal = Number(selectedRows[i].textContent - selectedRows[i+1].textContent);
  }
  alert(Number(cal))
}

background-color: yellow;

    <table class="checkboxdiv">
        <tr>
          <td>
            <input id = "mycheck" type="checkbox" onchange="inputChanged(event)" />
          </td>
          <td>$100</td>
        </tr>
        <tr>
          <td>
            <input id = "mycheck" type="checkbox" onchange="inputChanged(event)" />
          </td>
          <td>$20</td>
        </tr>
        <tr>
          <td>
            <input id = "mycheck" type="checkbox" onchange="inputChanged(event)" />
          </td>
          <td>$40</td>
        </tr>
        <tr>
          <td>
            <input id = "mycheck" type="checkbox" onchange="inputChanged(event)" />
          </td>
          <td>$21</td>
        </tr>
        <tr>
          <td>
            <input id = "mycheck" type="checkbox" onchange="inputChanged(event)" />
          </td>
          <td>$12</td>
        </tr>
      </table>
      
      <button onclick="Calculate()">Calculate</button>

嗨，我正在尝试计算复选框的两个值之间的差异并显示弹出窗口（警报框）。我在这里遇到 2 个问题

在得到结果弹出窗口后，我又得到一个显示 Nan 的弹出窗口。我如何删除它？
我想将选中的复选框的数量限制为 2，一旦选择了 2 个复选框，剩余的复选框应该被禁用我已经编写了代码，如果长度大于 2，复选框应该被禁用，但这是行不通的。

var selectedRows = document.getElementsByClassName('selected');
  if(selectedRows.length>2){
    document.getElementById("mycheck").disabled = true; 
  }
function inputChanged(event) {

  event.target.parentElement.parentElement.className =
    event.target.checked ? 'selected' : '';
}

function Calculate() {
  for (var i = 0; i < selectedRows.length; ++i) {
    alert(selectedRows[i]?.textContent.trim() - selectedRows[i+1]?.textContent.trim());
  }
}

.selected {
  background-color: yellow;
}

<table>
  <tr>
    <td>
      <input id = "mycheck" type="checkbox" onchange="inputChanged(event)" />
    </td>
    <td>100</td>
  </tr>
  <tr>
    <td>
      <input id = "mycheck" type="checkbox" onchange="inputChanged(event)" />
    </td>
    <td>20</td>
  </tr>
  <tr>
    <td>
      <input id = "mycheck" type="checkbox" onchange="inputChanged(event)" />
    </td>
    <td>40</td>
  </tr>
  <tr>
    <td>
      <input id = "mycheck" type="checkbox" onchange="inputChanged(event)" />
    </td>
    <td>21</td>
  </tr>
  <tr>
    <td>
      <input id = "mycheck" type="checkbox" onchange="inputChanged(event)" />
    </td>
    <td>12</td>
  </tr>
</table>

<button onclick="Calculate()">Calculate</button>

Answer 1

首先属性 id 在文档中应该是唯一的，您可以使用 class 代替。

您应该访问函数 selectedRows 内的 Calculate。

由于您要将选中的复选框的数量限制为 2，因此您的条件应为 .length > 1。

您可以尝试以下方法：

function inputChanged(event) {
  //get all checked
  var mycheck = document.querySelectorAll('.mycheck:checked');
  //get all unchecked
  var mycheckNot = document.querySelectorAll('.mycheck:not(:checked)');
  if(mycheck.length > 1){
    //disabled all unchecked
    for (var i = 0; i < mycheckNot.length; i++) {
      mycheckNot[i].disabled = true; 
    }
  }
  else{
    //enable all unchecked
    for (var i = 0; i < mycheckNot.length; i++) {
      mycheckNot[i].disabled = false; 
    }
  }
  event.target.parentElement.parentElement.className =
    event.target.checked ? 'selected' : '';
}

function Calculate() {
  //get all selected
  var selectedRows = document.getElementsByClassName('selected');
  var sum = 0 ;
  for (var i = 0; i < selectedRows.length; i++) {
    //convert the value to number and sum them up
    sum += Number(selectedRows[i].textContent)
  }
  alert(sum);
}

.selected {
    background-color: yellow;
 }

<table>
  <tr>
    <td>
      <input class = "mycheck" type="checkbox" onchange="inputChanged(event)" />
    </td>
    <td>100</td>
  </tr>
  <tr>
    <td>
      <input class = "mycheck" type="checkbox" onchange="inputChanged(event)" />
    </td>
    <td>20</td>
  </tr>
  <tr>
    <td>
      <input class = "mycheck" type="checkbox" onchange="inputChanged(event)" />
    </td>
    <td>40</td>
  </tr>
  <tr>
    <td>
      <input class = "mycheck" type="checkbox" onchange="inputChanged(event)" />
    </td>
    <td>21</td>
  </tr>
  <tr>
    <td>
      <input class = "mycheck" type="checkbox" onchange="inputChanged(event)" />
    </td>
    <td>12</td>
  </tr>
</table>

<button onclick="Calculate()">Calculate</button>

弹出所需的警报框后显示 NaN

1 个答案: