ラジオボタンが選択されていない場合、セルの値を削除する

Question

現在、私のコードでは、最初の5列のラジオボタンの値が「全体」という列に追加されています。次に、6番目の列のラジオボタンの選択が「Attendance Factor」列に追加されます。

ラジオボタンをダブルクリックすると、ラジオボタンを選択解除できるようにするコードもあります。しかし、「Overall」または「Attendance Factor」セルの値がすでに計算されている行にあるラジオボタンをダブルクリックすると、その値がそのまま残ります。

私がしようとしているのは、そのレーティングの構成要素であるラジオボタンの値の1つが選択されていない場合、その行の 'Overall'または 'Attendance Factor'セルの値を削除することです。

ここでは、あなたと一緒に遊びたいあなたのためのfiddleです。

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{ 
 
     \t 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 1

ちょうど要するにhttps://jsfiddle.net/00482bdw/2/

@あなたのフィドルを更新し、変更内容は、イベントのonchange

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

ラジオです。

$(':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(''); 
    } 
    }