Question

目前我的代码将前5列的单选按钮的值加到标有“整体”的列中。然后将第6列的单选按钮选择添加到“考勤因素”列中。

我还有一些代码可以在双击单选按钮时取消选择单选按钮。但是，如果您要双击一个单独的单选按钮，其中“总体”或“出勤因素”单元格已经计算了一个值，那么它将保留该值。

所以我要做的是删除该行中'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{
      	 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/

简而言之，这些变化是

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

Radio onchange事件。

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

如果未选择单选按钮，则删除单元格的值

1 个答案: