CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Thilina Sampath
Thilina Sampath

Reputation: 3775

Style = “display=none;” not working correctly in my project

I have developed web page using JavaScript. There are error in get two check box selected and remove. then two tr in display, when I not selected check box. How I solve this?

check error in images

enter image description hereenter image description hereenter image description hereenter image description hereenter image description here

There are select 2 box and remove but display 3 image and select 3 check box and remove again then hidden tr filed, but I want hidden, when I remove selected filed.

2nd image must be like this

enter image description here

but mine,

enter image description here

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

Please answer this question quickly.

Upvotes: 0

Views: 376

Answers (2)

Hungry Mind
Hungry Mind

Reputation: 113

You have to remove chowSelected from 

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

Try following code.

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

Upvotes: 1

prasanth
prasanth

Reputation: 22490

else if (sum <= granTotal) is the problem ,At the time of c uncheck sum is less then 5000 .so the condition was chowSelected runned. so i was applied with if condition checked only allowed to chowSeleced function

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

Upvotes: 1

Related Questions