라디오 버튼이 선택되지 않은 경우 셀 값 제거

현재 내 코드는 처음 5 열 라디오 버튼의 값을 '전체'열에 추가합니다. 그러면 6 번째 열의 라디오 버튼 선택이 '출석 요인'열에 추가됩니다.라디오 버튼이 선택되지 않은 경우 셀 값 제거

라디오 버튼을 두 번 클릭하면 라디오 버튼을 선택 취소 할 수있는 코드도 있습니다. 그러나 'Overall'또는 'Attendance Factor'셀의 값이 이미 계산 된 행의 라디오 버튼을 두 번 클릭하면 값이 그대로 유지됩니다.

그래서 내가하려는 것은 해당 등급의 구성 요소 인 라디오 버튼 값 중 하나가 선택되지 않은 경우 해당 행의 '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>

출처

2017-09-30 ChippeRockTheMurph

더블 클릭 수신기에서 제거하십시오. 코드로 당신을 도우려는 경우 jsfiddle 또는 codepen을 작성하십시오 – Chris

그냥 간단히 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(''); 
    } 
    }

출처

2017-09-30 17:48:07

'전체'열에 대해서는 작동하지만 '출석 요인'열에서는 작동하지 않습니다. – ChippeRockTheMurph

라디오 버튼이 선택되지 않은 경우 셀 값 제거

답변

관련 문제