如何通过jQuery将Class添加到按钮组中的一个按钮?

网络开发者2

我有一个 HTML 表格,每一行都有一个按钮组。当用户选择一个按钮时,我想突出显示该按钮,而不是其他按钮。我正在尝试使用一个类来做到这一点。但是,如何从其他 2 个按钮中删除此类?

.selectedAnswer {
  font-weight: bold;
  border: 1px solid blue;
}

 <table>
  <tr>
    <td>
      Question 1
    </td>
    <td>
      <div class="btn-group" role="group" aria-label="..." id="Rating">
        <button type="button" id="btnYes" value="yes" class="btn btn-default btn-response" data-rating="Yes">Yes</button>
        <button type="button" id="btnNo" value="no" class="btn btn-default btn-response" data-rating="No">No</button>
        <button type="button" id="btnNa" value="na" class="btn btn-default btn-response" data-rating="NA">N/A</button>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      Question 2
    </td>
    <td>
      <div class="btn-group" role="group" aria-label="..." id="Rating">
        <button type="button" id="btnYes" value="yes" class="btn btn-default btn-response" data-rating="Yes">Yes</button>
        <button type="button" id="btnNo" value="no" class="btn btn-default btn-response" data-rating="No">No</button>
        <button type="button" id="btnNa" value="na" class="btn btn-default btn-response" data-rating="NA">N/A</button>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      Question 3
    </td>
    <td>
      <div class="btn-group" role="group" aria-label="..." id="Rating">
        <button type="button" id="btnYes" value="yes" class="btn btn-default btn-response" data-rating="Yes">Yes</button>
        <button type="button" id="btnNo" value="no" class="btn btn-default btn-response" data-rating="No">No</button>
        <button type="button" id="btnNa" value="na" class="btn btn-default btn-response" data-rating="NA">N/A</button>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      Question 4
    </td>
    <td>
      <div class="btn-group" role="group" aria-label="..." id="Rating">
        <button type="button" id="btnYes" value="yes" class="btn btn-default btn-response" data-rating="Yes">Yes</button>
        <button type="button" id="btnNo" value="no" class="btn btn-default btn-response" data-rating="No">No</button>
        <button type="button" id="btnNa" value="na" class="btn btn-default btn-response" data-rating="NA">N/A</button>
      </div>
    </td>
  </tr>

</table>

这是jQuery...

//Set up click event on the Remove button
$('.btn-response').click(function(event) {
  $(this).addClass("selectedAnswer");
});

链接:https : //jsfiddle.net/webdevguy2/0mzjyvw2/2/

关于更好的方法的任何建议?

乔恩·乌莱斯

阅读.siblings()jQuery API。

改变这个:

$('.btn-response').click(function (event) {
  $(this).addClass("selectedAnswer");  
});

对此:

$('.btn-response').click(function (event) {
  $(this).addClass("selectedAnswer").siblings().removeClass("selectedAnswer");  
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何通过单击另一个片段中的按钮将一行添加到ListView中?

来自分类Dev

通过JavaScript将两个按钮添加到一个div

来自分类Dev

通过JavaScript将两个按钮添加到一个div

来自分类Dev

playframework:jQuery:将元素添加到视图的列表中,将onclick按钮添加到另一个视图

来自分类Dev

如何以编程方式将一个按钮添加到我的 Windows 窗体中,该按钮将在单击时打开一个宏?

来自分类Dev

Jquery - 将下一个按钮添加到选项卡

来自分类Dev

一种通过单击按钮将 int 值添加到文本框,然后使用另一个按钮从 int 值中减去的方法

来自分类Dev

如何将批处理文件添加到Visual Basic中并按一个按钮执行?

来自分类Dev

如何从另一个窗口将单选按钮添加到堆栈面板?

来自分类Dev

如何将下一个按钮添加到弹出窗口?

来自分类Dev

将JMenuItem添加到JMenuBar以在菜单中创建一个切换按钮

来自分类Dev

jQuery datepicker将单击事件添加到上一个下一个按钮

来自分类Dev

如果使用按钮将项目添加到列表中,如何在另一个按钮中使用更新后的列表?

来自分类Dev

Python GTK:使用另一个按钮将一个按钮添加到GUI

来自分类Dev

jQuery-在单击按钮时将表单上方的元素添加到另一个div

来自分类Dev

如何将一个 DLL 编译按钮从一个 WPF 项目添加到另一个项目的事件处理程序?

来自分类Dev

如何将动作添加到另一个按钮内的新jbutton上以播放jfugue模式

来自分类Dev

单击下一个按钮时如何将所需的属性页添加到属性表

来自分类Dev

如何通过外部按钮一次将jqgrid数据添加到数据库中

来自分类Dev

如何将按钮的输入值添加到jQuery中的两个不同的输入字段中

来自分类Dev

单击按钮Xamarin.forms将一个孩子添加到父项

来自分类Dev

将操作按钮添加到一个片段的操作栏

来自分类Dev

在ajax序列之后将一个按钮添加到复选框的末尾

来自分类Dev

制作一个将图形添加到JFrame的按钮

来自分类Dev

将选定的对话框项添加到另一个按钮方法

来自分类Dev

单击按钮将组件添加到另一个组件

来自分类Dev

如何将按钮添加到 <div class>

来自分类Dev

如何存储单击的最后一个按钮并添加到列表框

来自分类Dev

如何使用VBA将按钮添加到工作表并在按下另一个按钮时分配其单击事件

Related 相关文章

  1. 1

    如何通过单击另一个片段中的按钮将一行添加到ListView中?

  2. 2

    通过JavaScript将两个按钮添加到一个div

  3. 3

    通过JavaScript将两个按钮添加到一个div

  4. 4

    playframework:jQuery:将元素添加到视图的列表中,将onclick按钮添加到另一个视图

  5. 5

    如何以编程方式将一个按钮添加到我的 Windows 窗体中,该按钮将在单击时打开一个宏?

  6. 6

    Jquery - 将下一个按钮添加到选项卡

  7. 7

    一种通过单击按钮将 int 值添加到文本框,然后使用另一个按钮从 int 值中减去的方法

  8. 8

    如何将批处理文件添加到Visual Basic中并按一个按钮执行?

  9. 9

    如何从另一个窗口将单选按钮添加到堆栈面板?

  10. 10

    如何将下一个按钮添加到弹出窗口?

  11. 11

    将JMenuItem添加到JMenuBar以在菜单中创建一个切换按钮

  12. 12

    jQuery datepicker将单击事件添加到上一个下一个按钮

  13. 13

    如果使用按钮将项目添加到列表中,如何在另一个按钮中使用更新后的列表?

  14. 14

    Python GTK:使用另一个按钮将一个按钮添加到GUI

  15. 15

    jQuery-在单击按钮时将表单上方的元素添加到另一个div

  16. 16

    如何将一个 DLL 编译按钮从一个 WPF 项目添加到另一个项目的事件处理程序?

  17. 17

    如何将动作添加到另一个按钮内的新jbutton上以播放jfugue模式

  18. 18

    单击下一个按钮时如何将所需的属性页添加到属性表

  19. 19

    如何通过外部按钮一次将jqgrid数据添加到数据库中

  20. 20

    如何将按钮的输入值添加到jQuery中的两个不同的输入字段中

  21. 21

    单击按钮Xamarin.forms将一个孩子添加到父项

  22. 22

    将操作按钮添加到一个片段的操作栏

  23. 23

    在ajax序列之后将一个按钮添加到复选框的末尾

  24. 24

    制作一个将图形添加到JFrame的按钮

  25. 25

    将选定的对话框项添加到另一个按钮方法

  26. 26

    单击按钮将组件添加到另一个组件

  27. 27

    如何将按钮添加到 <div class>

  28. 28

    如何存储单击的最后一个按钮并添加到列表框

  29. 29

    如何使用VBA将按钮添加到工作表并在按下另一个按钮时分配其单击事件

热门标签

归档