如何使用JavaScript

时间:2019-02-27 10:31:37

标签: javascript jquery html

当我单击单选按钮时,跨度文本更改为 true 或其他应为 false 并且其工作正常,但是当我单击时我需要缺少单选按钮,然后状态列转到发送,否则不发送

  $('table').on('change', ':radio', function () {
            $(this).next('span').text('True').closest('td').siblings().find('span').text('False');
             $(this).next('span').text('True').closest('td').siblings().find('label').text('Send');
        });

HTML

<tr>
  <td><input type="radio" name="attandance"><span>True</span></td>
  <td><input type="radio" name="attandance"><span>True</span></td>
  <td><input type="radio" name="attandance"><span>True</span></td>
<td><label>NotSend</label></td>
</tr>

这里是Image,您明白了我的意思。 Picture

注意  当我们单击“缺席”单选按钮时,只有状态为发送,否则为不发送 提前致谢。 快乐的代码日。

1 个答案:

答案 0 :(得分:0)

我刚刚在输入中添加了一个数据属性以能够识别它,然后在JS中将其用作执行“特殊”操作的条件。

$('table').on('change', ':radio', function() {
  $(this).next('span').text('True').closest('td').siblings().find('span').text('False');
  $(this).next('span').text('True').closest('td').siblings().find('label').text('NotSend');

  // using the added data-absent
  if ($(this).data("absent")) {
    $(this).next('span').text('True').closest('td').siblings().find('label').text('Send');
  }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Present</th>
      <th>Absent</th>
      <th>Leave</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="radio" name="attandance"><span>True</span></td>
      <!-- adding a data property to identify the input -->
      <td><input type="radio" name="attandance" data-absent="true"><span>True</span></td>
      <td><input type="radio" name="attandance"><span>True</span></td>
      <td><label class="label">NotSend</label></td>
    </tr>
  </tbody>
</table>