スタイルは、私はJavaScriptを使用してWebページを開発してきた私のプロジェクト

Question

で正しく動作していません。 2つのチェックボックスを選択して削除するとエラーが発生します。 2つのディスプレイでTR、私は、チェックボックスを選択しないとき。どのように私はこれを解決する？

画像でチェックエラー

あり選択2箱があり、除去するが、ディスプレイ3の画像と3のチェックボックスを選択し、提出TRを隠さ再度削除しますが、私はしたいです選択したフィールドを削除すると非表示になります。

第二の画像は

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'; 
 
}

<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">

答えてください、この

が、私のようでなければなりませんこの質問はすぐに。

Answer 1

else if (sum <= granTotal)はcチェックを外し和の時点で条件がchowSelected runnedたの.so 5000少ないしで、問題となっています。だから私は、条件が確認された場合にのみ、chowSeleced機能あなたは、コードを以下試してみてください

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

からchowSelectedを削除する必要が

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'; 
 
}

<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">

Answer 2

に許可されて適用されました。

<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>