Style =“display = none;”在我的项目中无法正常工作

Question

我使用JavaScript开发了网页。选中两个复选框时出错，然后删除。当我没有选中复选框时，显示两个 tr 。我怎么解决这个问题？

检查图像中的错误

有选择2框并删除但显示3图像并选择3复选框并再次删除然后隐藏 tr 字段，但我想隐藏，当我删除选定的字段。

第二张图片必须是这样的

但我的，

＆＃13;

＆＃13;

var arr = [];
var selectedVal = 0;


$("input[name='invoiceTotal']").change(function() {
  selectedVal = this.value;
  var granTotal = 5000;

  if (this.checked) {
    arr.push(this.value);
  } else {
    //alert(selectedVal);
    arr.splice(arr.indexOf(this.value), 1);
    hidenSelected(selectedVal);
  }
  var sum = arr.reduce((a, b) => parseFloat(a) + parseFloat(b), 0);
  console.log("granTotal : " + granTotal);
  console.log(sum);
  console.log("sum : " + sum);
  console.log("selectedVal : " + selectedVal);

  if (sum == 0) {
    hidenUpload();
  } else if (sum <= granTotal) {
    chowSelected(selectedVal);
  } else {}
});

function chowSelected(j) {
  document.getElementById(j).style.display = '';
}

function hidenSelected(j) {
  alert(j);
  document.getElementById(j).style.display = 'none';
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<table border="1">
  <tr style="display: ;">
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr id="2771.0" style="display: none;">
    <td>a</td>
    <td>$100</td>
  </tr>
  <tr id="2826.0" style="display: none;">
    <td>b</td>
    <td>$200</td>
  </tr>
  <tr id="2087.5" style="display: none;">
    <td>c</td>
    <td>$300</td>
  </tr>
  <tr id="4314.0" style="display: none;">
    <td>d</td>
    <td>$400</td>
  </tr>
  <tr id="5000.0" style="display: none;">
    <td>e</td>
    <td>$500</td>
  </tr>
</table>

<input type="checkbox" class="invot" name="invoiceTotal" value="2771.0">
<input type="checkbox" class="invot" name="invoiceTotal" value="2826.0">
<input type="checkbox" class="invot" name="invoiceTotal" value="2087.5">
<input type="checkbox" class="invot" name="invoiceTotal" value="4314.0">
<input type="checkbox" class="invot" name="invoiceTotal" value="5000.0">

＆＃13;

＆＃13;

＆＃13;

请快速回答这个问题。

Answer 1

else if (sum <= granTotal)是问题，在c取消选中时总和少于5000。因此条件为chowSelected已运行。因此，如果条件选中仅允许chowSeleced函数

，则我应用了

＆＃13;

＆＃13;

var arr = [];
var selectedVal = 0;


$("input[name='invoiceTotal']").change(function() {
  selectedVal = this.value;
  var granTotal = 5000;

  if (this.checked) {
   
    arr.push(this.value);
  } else {
    //alert(selectedVal);
    arr.splice(arr.indexOf(this.value), 1);
    hidenSelected(selectedVal);
  }
  console.log(arr)
  var sum = arr.reduce((a, b) => parseFloat(a) + parseFloat(b), 0);
  //console.log("granTotal : " + granTotal);
  //console.log(sum);
  //console.log("sum : " + sum);
  //console.log("selectedVal : " + selectedVal);
console.log(sum)
  if (sum == 0) {
    hidenUpload();
  } else if (sum <= granTotal) {
    if(this.checked){
    chowSelected(selectedVal);
      }
  } else {}
});

function chowSelected(j) {
  document.getElementById(j).style.display = '';
}

function hidenSelected(j) {
  document.getElementById(j).style.display = 'none';
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<table border="1">
  <tr style="display: ;">
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr id="2771.0" style="display: none;">
    <td>a</td>
    <td>$100</td>
  </tr>
  <tr id="2826.0" style="display: none;">
    <td>b</td>
    <td>$200</td>
  </tr>
  <tr id="2087.5" style="display: none;">
    <td>c</td>
    <td>$300</td>
  </tr>
  <tr id="4314.0" style="display: none;">
    <td>d</td>
    <td>$400</td>
  </tr>
  <tr id="5000.0" style="display: none;">
    <td>e</td>
    <td>$500</td>
  </tr>
</table>

<input type="checkbox" class="invot" name="invoiceTotal" value="2771.0">
<input type="checkbox" class="invot" name="invoiceTotal" value="2826.0">
<input type="checkbox" class="invot" name="invoiceTotal" value="2087.5">
<input type="checkbox" class="invot" name="invoiceTotal" value="4314.0">
<input type="checkbox" class="invot" name="invoiceTotal" value="5000.0">

＆＃13;

＆＃13;

＆＃13;

Answer 2

您必须从

中删除chowSelected

  if (sum == 0) {
    //hidenUpload();
  } else if (sum <= granTotal) {
    //chowSelected(selectedVal);//Remove this line
  } else {}

请尝试以下代码。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<table border="1">
  <tr style="display: ;">
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr id="2771.0" style="display: none;">
    <td>a</td>
    <td>$100</td>
  </tr>
  <tr id="2826.0" style="display: none;">
    <td>b</td>
    <td>$200</td>
  </tr>
  <tr id="2087.5" style="display: none;">
    <td>c</td>
    <td>$300</td>
  </tr>
  <tr id="4314.0" style="display: none;">
    <td>d</td>
    <td>$400</td>
  </tr>
  <tr id="5000.0" style="display: none;">
    <td>e</td>
    <td>$500</td>
  </tr>
</table>

<input type="checkbox" class="invot" name="invoiceTotal" value="2771.0">
<input type="checkbox" class="invot" name="invoiceTotal" value="2826.0">
<input type="checkbox" class="invot" name="invoiceTotal" value="2087.5">
<input type="checkbox" class="invot" name="invoiceTotal" value="4314.0">
<input type="checkbox" class="invot" name="invoiceTotal" value="5000.0">

    <script type="text/javascript">
var arr = [];
var selectedVal = 0;


$("input[name='invoiceTotal']").change(function() {
  selectedVal = this.value;
  var granTotal = 5000;

  if (this.checked) {
    arr.push(this.value);
    chowSelected(selectedVal);//Show if it is checked
  } else {
    //alert(selectedVal);
    arr.splice(arr.indexOf(this.value), 1);
    hidenSelected(selectedVal);//Hide if it is unchecked
  }
  var sum = arr.reduce((a, b) => parseFloat(a) + parseFloat(b), 0);
  console.log("granTotal : " + granTotal);
  console.log(sum);
  console.log("sum : " + sum);
  console.log("selectedVal : " + selectedVal);

  if (sum == 0) {
    //hidenUpload();
  } else if (sum <= granTotal) {
    //chowSelected(selectedVal);//Remove this line
  } else {}
});

function chowSelected(j) {
  document.getElementById(j).style.display = 'table-row';
}

function hidenSelected(j) {
  alert(j);
  document.getElementById(j).style.display = 'none';
}
</script>