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

我使用JavaScript开发了网页。有两个复选框选中并删除错误。然后两个tr在显示，当我没有选中复选框。我如何解决这个问题？在图像Style =“display = none;”在我的项目中无法正常工作

检查错误

有选择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">

请回答这个问题很快。

来源

2017-02-09 Thilina Sampath

第二张图片不应该只显示“a”行吗？很难理解你在问什么。 –

@MattMokary我编辑代码请检查。 –

我是你的意思尊敬的表行打开和隐藏与输入框检查并取消选中 – prasanth

else if (sum <= granTotal)是问题所在，当时c取消勾选的总和小于5000，所以条件为chowSelected运行。所以我用if条件托运只允许chowSeleced功能

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

来源

2017-02-09 04:36:17 prasanth

谢谢。我解决了问题.. –

永远欢迎...快乐编码...！ – prasanth

应用于你必须从

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

删除chowSelected试试下面的代码。

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

来源

2017-02-09 04:52:14

谢谢，这有助于我父亲的教育。但我想要**在c取消时总和小于5000 **。 –

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

回答

相关问题