Remove Value of Cell if Radio Button is Unselected

Question

Currently my code, adds up the values of the first 5 column's radio buttons into the column labeled 'Overall'. The 6th column's radio button selection is then added into the 'Attendance Factor' column.

I also have some code which allows the radio buttons to be unselected if you double click the radio button. However if you were to double click a radio button which is in a row where the 'Overall' or 'Attendance Factor' cells have a value already calculated it will just leave the value there.

So what I'm trying to do is to remove the value of the 'Overall' or 'Attendance Factor' cell in that row if one of the radio button values that is a component of that rating is unselected.

Here's the fiddle for those of you that want to play around with it.

 var overall= $('#overall');

    $(document).ready(function() {
      $(':radio').change(function(e) {
        var row = $(this).closest('.item'); 
        var checkedItems = row.find(":checked:not(:radio[name='attendance'])")
      if(e.target.name != "attendance"){
        
        if (checkedItems.length == 5) {
          row.find("td.overall").html(getOverall(checkedItems));
        }
      } else{
      	 row.find("td.attendance").html("x "+parseFloat($(this).val()/10).toFixed(1));
      }  
    })

    function getOverall(_checkedItems) {
    var total = 0;
    _checkedItems.each(function() {
    total += parseFloat($(this).val());
    });
    return total;
    }


    });

$(document).on('dblclick','input:radio',function(){
    if(this.checked){
        $(this).prop('checked', false);
    }
});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 115%;
}
td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 5px;
  text-align: center
}
tr:nth-child(even) {
  background-color: #dddddd;
}   
div {
  padding-top: 10px;
}



   
    
      Team
      Player
      #
      Pos
      Skating
      Shooting
      Passing
      Puck Control
      Positive Team Impact
      Attendance
      Overall
      Attendance 
Factor
    
   
  
    
      
      
      
      
      
        
          1
          2
          3
          4
          5
          

          6
          7
          8
          9
          10
        
      
      
        
          1
          2
          3
          4
          5
          

          6
          7
          8
          9
          10
        
      
      
        
          1
          2
          3
          4
          5
          

          6
          7
          8
          9
          10
        
      
      
        
          1
          2
          3
          4
          5
          

          6
          7
          8
          9
          10
        
      
      
        
          1
          2
          3
          4
          5
          

          6
          7
          8
          9
          10
        
      
      
        
          1
          2
          3
          4
          5
          

          6
          7
          8
          9
          10
        
      
      
      
      

    
    
      
      
      
      
      
        
          1
          2
          3
          4
          5
          

          6
          7
          8
          9
          10
        
      
      
        
          1
          2
          3
          4
          5
          

          6
          7
          8
          9
          10
        
      
      
        
          1
          2
          3
          4
          5
          

          6
          7
          8
          9
          10
        
      
      
        
          1
          2
          3
          4
          5
          

          6
          7
          8
          9
          10
        
      
      
        
          1
          2
          3
          4
          5
          

          6
          7
          8
          9
          10
        
      
      
        
          1
          2
          3
          4
          5
          

          6
          7
          8
          9
          10

Srikant Sahu · Accepted Answer

Just updated your fiddle @ https://jsfiddle.net/00482bdw/2/

In short, the changes are

$(this).trigger('change');  // in the double click event add this line.

Radio onchange event.

$(':radio').change(function(e) {
    var row = $(this).closest('.item'); 
    var checkedItems = row.find(":checked:not(:radio[name='attendance'])")
  if(e.target.name != "attendance"){

    if (checkedItems.length == 5) {
      row.find("td.overall").html(getOverall(checkedItems));
    } else {
        row.find("td.overall").html('');
    }
  } else{

  if($(this).prop('checked')){
     row.find("td.attendance").html("x "+parseFloat($(this).val()/10).toFixed(1));
     } else {
     row.find("td.attendance").html('');
     }
  }

Remove Value of Cell if Radio Button is Unselected

Answers (1)

Related Questions