ChippeRockTheMurph ChippeRockTheMurph - 3 years ago 109
CSS Question

Remove Value of Cell if Radio Button is Unselected

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="copyTable" id="copyTable">
<thead>
<tr>
<th>Team</th>
<th>Player</th>
<th>#</th>
<th>Pos</th>
<th>Skating</th>
<th>Shooting</th>
<th>Passing</th>
<th>Puck Control</th>
<th>Positive Team Impact</th>
<th>Attendance</th>
<th>Overall</th>
<th>Attendance </br>Factor</th>
</tr>
</thead>
<tbody>
<tr class="item" data-id="1">
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<form action="">
<input type="radio" name="skating" value="1"><span>1</span>
<input type="radio" name="skating" value="2"><span>2</span>
<input type="radio" name="skating" value="3"><span>3</span>
<input type="radio" name="skating" value="4"><span>4</span>
<input type="radio" name="skating" value="5"><span>5</span>
<br>
<input type="radio" name="skating" value="6"><span>6</span>
<input type="radio" name="skating" value="7"><span>7</span>
<input type="radio" name="skating" value="8"><span>8</span>
<input type="radio" name="skating" value="9"><span>9</span>
<input type="radio" name="skating" value="10"><span>10</span>
</form>
</td>
<td>
<form action="">
<input type="radio" name="shooting" value="1"><span>1</span>
<input type="radio" name="shooting" value="2"><span>2</span>
<input type="radio" name="shooting" value="3"><span>3</span>
<input type="radio" name="shooting" value="4"><span>4</span>
<input type="radio" name="shooting" value="5"><span>5</span>
<br>
<input type="radio" name="shooting" value="6"><span>6</span>
<input type="radio" name="shooting" value="7"><span>7</span>
<input type="radio" name="shooting" value="8"><span>8</span>
<input type="radio" name="shooting" value="9"><span>9</span>
<input type="radio" name="shooting" value="10"><span>10</span>
</form>
</td>
<td>
<form action="">
<input type="radio" name="passing" value="1"><span>1</span>
<input type="radio" name="passing" value="2"><span>2</span>
<input type="radio" name="passing" value="3"><span>3</span>
<input type="radio" name="passing" value="4"><span>4</span>
<input type="radio" name="passing" value="5"><span>5</span>
<br>
<input type="radio" name="passing" value="6"><span>6</span>
<input type="radio" name="passing" value="7"><span>7</span>
<input type="radio" name="passing" value="8"><span>8</span>
<input type="radio" name="passing" value="9"><span>9</span>
<input type="radio" name="passing" value="10"><span>10</span>
</form>
</td>
<td>
<form action="">
<input type="radio" name="puck_control" value="1"><span>1</span>
<input type="radio" name="puck_control" value="2"><span>2</span>
<input type="radio" name="puck_control" value="3"><span>3</span>
<input type="radio" name="puck_control" value="4"><span>4</span>
<input type="radio" name="puck_control" value="5"><span>5</span>
<br>
<input type="radio" name="puck_control" value="6"><span>6</span>
<input type="radio" name="puck_control" value="7"><span>7</span>
<input type="radio" name="puck_control" value="8"><span>8</span>
<input type="radio" name="puck_control" value="9"><span>9</span>
<input type="radio" name="puck_control" value="10"><span>10</span>
</form>
</td>
<td>
<form action="">
<input type="radio" name="team_play" value="1"><span>1</span>
<input type="radio" name="team_play" value="2"><span>2</span>
<input type="radio" name="team_play" value="3"><span>3</span>
<input type="radio" name="team_play" value="4"><span>4</span>
<input type="radio" name="team_play" value="5"><span>5</span>
<br>
<input type="radio" name="team_play" value="6"><span>6</span>
<input type="radio" name="team_play" value="7"><span>7</span>
<input type="radio" name="team_play" value="8"><span>8</span>
<input type="radio" name="team_play" value="9"><span>9</span>
<input type="radio" name="team_play" value="10"><span>10</span>
</form>
</td>
<td>
<form action="">
<input type="radio" name="attendance" value="1"><span>1</span>
<input type="radio" name="attendance" value="2"><span>2</span>
<input type="radio" name="attendance" value="3"><span>3</span>
<input type="radio" name="attendance" value="4"><span>4</span>
<input type="radio" name="attendance" value="5"><span>5</span>
<br>
<input type="radio" name="attendance" value="6"><span>6</span>
<input type="radio" name="attendance" value="7"><span>7</span>
<input type="radio" name="attendance" value="8"><span>8</span>
<input type="radio" name="attendance" value="9"><span>9</span>
<input type="radio" name="attendance" value="10"><span>10</span>
</form>
</td>
<td class="overall" id="overall">
</td>
<td class="attendance" id="attendance"></td>

</tr>
<tr class="item" data-id="2">
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<form action="">
<input type="radio" name="skating" value="1"><span>1</span>
<input type="radio" name="skating" value="2"><span>2</span>
<input type="radio" name="skating" value="3"><span>3</span>
<input type="radio" name="skating" value="4"><span>4</span>
<input type="radio" name="skating" value="5"><span>5</span>
<br>
<input type="radio" name="skating" value="6"><span>6</span>
<input type="radio" name="skating" value="7"><span>7</span>
<input type="radio" name="skating" value="8"><span>8</span>
<input type="radio" name="skating" value="9"><span>9</span>
<input type="radio" name="skating" value="10"><span>10</span>
</form>
</td>
<td>
<form action="">
<input type="radio" name="shooting" value="1"><span>1</span>
<input type="radio" name="shooting" value="2"><span>2</span>
<input type="radio" name="shooting" value="3"><span>3</span>
<input type="radio" name="shooting" value="4"><span>4</span>
<input type="radio" name="shooting" value="5"><span>5</span>
<br>
<input type="radio" name="shooting" value="6"><span>6</span>
<input type="radio" name="shooting" value="7"><span>7</span>
<input type="radio" name="shooting" value="8"><span>8</span>
<input type="radio" name="shooting" value="9"><span>9</span>
<input type="radio" name="shooting" value="10"><span>10</span>
</form>
</td>
<td>
<form action="">
<input type="radio" name="passing" value="1"><span>1</span>
<input type="radio" name="passing" value="2"><span>2</span>
<input type="radio" name="passing" value="3"><span>3</span>
<input type="radio" name="passing" value="4"><span>4</span>
<input type="radio" name="passing" value="5"><span>5</span>
<br>
<input type="radio" name="passing" value="6"><span>6</span>
<input type="radio" name="passing" value="7"><span>7</span>
<input type="radio" name="passing" value="8"><span>8</span>
<input type="radio" name="passing" value="9"><span>9</span>
<input type="radio" name="passing" value="10"><span>10</span>
</form>
</td>
<td>
<form action="">
<input type="radio" name="puck_control" value="1"><span>1</span>
<input type="radio" name="puck_control" value="2"><span>2</span>
<input type="radio" name="puck_control" value="3"><span>3</span>
<input type="radio" name="puck_control" value="4"><span>4</span>
<input type="radio" name="puck_control" value="5"><span>5</span>
<br>
<input type="radio" name="puck_control" value="6"><span>6</span>
<input type="radio" name="puck_control" value="7"><span>7</span>
<input type="radio" name="puck_control" value="8"><span>8</span>
<input type="radio" name="puck_control" value="9"><span>9</span>
<input type="radio" name="puck_control" value="10"><span>10</span>
</form>
</td>
<td>
<form action="">
<input type="radio" name="team_play" value="1"><span>1</span>
<input type="radio" name="team_play" value="2"><span>2</span>
<input type="radio" name="team_play" value="3"><span>3</span>
<input type="radio" name="team_play" value="4"><span>4</span>
<input type="radio" name="team_play" value="5"><span>5</span>
<br>
<input type="radio" name="team_play" value="6"><span>6</span>
<input type="radio" name="team_play" value="7"><span>7</span>
<input type="radio" name="team_play" value="8"><span>8</span>
<input type="radio" name="team_play" value="9"><span>9</span>
<input type="radio" name="team_play" value="10"><span>10</span>
</form>
</td>
<td>
<form action="">
<input type="radio" name="attendance" value="1"><span>1</span>
<input type="radio" name="attendance" value="2"><span>2</span>
<input type="radio" name="attendance" value="3"><span>3</span>
<input type="radio" name="attendance" value="4"><span>4</span>
<input type="radio" name="attendance" value="5"><span>5</span>
<br>
<input type="radio" name="attendance" value="6"><span>6</span>
<input type="radio" name="attendance" value="7"><span>7</span>
<input type="radio" name="attendance" value="8"><span>8</span>
<input type="radio" name="attendance" value="9"><span>9</span>
<input type="radio" name="attendance" value="10"><span>10</span>
</form>
</td>
<td class="overall" id="overall">
</td>
<td class="attendance" id="attendance"></td>

</tr>
</tbody>
</table>




Answer Source

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('');
     }
  }  
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download