如何在引导表中设置单选按钮或复选框的样式？

Posted 2023-05-08

【中文标题】如何在引导表中设置单选按钮或复选框的样式？

【英文标题】：How to style radio button or checkbox inside a bootstrap table?

【发布时间】：2015-09-23 02:09:13

【问题描述】：

我希望使用 https://github.com/cosmicwheels/jquery-checkradios 之类的东西在 Bootstrap 表中设置单选按钮或复选框的样式。但是，我不明白如何做到这一点，因为实际相应的输入标签是由 javascript 代码 (bootstrap-table.js) 中的连接操作创建的。是否有任何规定提供 CSS 类来设置 Bootstrap 表中的单选按钮样式？

【问题讨论】：

是的，我知道可以通过这种方式选择整行。参见例如数据单元样式、数据行样式、数据格式化程序、类/数据类。 DOM 可能也可以在事件处理程序中进行操作。但是，我的问题特定于复选框或单选按钮的样式。我看到可以使用 data-formatter 选项来操作它们的属性：github.com/wenzhixin/bootstrap-table-examples/blob/master/…。但是，关于造型它们的任何想法？它们似乎无法通过在渲染后简单地添加一个类来工作。

【参考方案1】：

以下是 Bootstrap Table 中样式化单选按钮的示例。如果这是首选选项，您可以轻松删除 JS sn-ps 以及一些 CSS，以使单选按钮成为唯一的可点击元素。

Font Awesome 用于单选按钮，因此请务必包含它。

input[type=radio] 
    display: none;

label 
    cursor: pointer;

input[type=radio] + label:before 
    font-family:'FontAwesome';
    display: inline-block;

input[type=radio] + label:before 
    content:"\f10c";
    color: #f00;
    cursor: pointer;

input[type=radio] + label:before 
    letter-spacing: 10px;

input[type=radio]:checked + label:before 
    content:"\f111";
    color: #fff; /* Remove this if you remove the 3 Last Rules of the CSS */

片段

/* Delete the JS Below to Remove the Hover Effect and to Make the Buttons + Label the only Active Area */

$('.table tr').click(function(event) 
  if (event.target.type !== 'radio') 
    $(':radio', this).trigger('click');
  
);

$(":radio[name=radios]").change(function() 
  $(".table tr.active").removeClass("active");
  $(this).closest("tr").addClass("active");
);

.wrapper 
  margin-top: 40px;

.table-striped 
  background-color: rgba(77, 162, 179, 0.35);
  color: #4DA2B3;

.table-responsive 
  border-color: transparent;
  font-size: 20px;
  cursor: pointer;
  /* Remove this if you remove the 3 Last Rules Rules of the CSS */

.table tbody tr td 
  line-height: 24px;
  padding-top: 12px;

input[type=radio] 
  display: none;

label 
  cursor: pointer;

input[type=radio] + label:before 
  font-family: 'FontAwesome';
  display: inline-block;
  font-size: 20px;
  font-weight: 200;

input[type=radio] + label:before 
  content: "\f10c";
  /* The Open Circle Can be replaced with another Font Awesome Icon */
  color: #4DA2B3;
  cursor: pointer;

input[type=radio] + label:before 
  letter-spacing: 10px;

input[type=radio]:checked + label:before 
  content: "\f05d";
  /* Replace with f111 for a Solid Circle (or any other Font Awesome Icon */
  color: #fff;
  /* Remove this if you remove the 3 Last Rules of the CSS */

/* Delete the Rules Below (and 2 above with Comments) to Remove the Hover Effect and to Make the Buttons + Label the only Active Area */

.table tbody tr:hover td 
  background-color: rgba(77, 162, 179, 0.55);
  color: #fff;
  border-bottom: 10px solid rgba(7, 101, 120, 0.85);

.table tbody tr.active td 
  background-color: rgba(77, 162, 179, 0.55);
  color: #fff;

.table tbody tr.active td label 
  color: #fff;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper">
  <div class="container">
    <div class="table-responsive col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
      <table class="table table-striped">
        <tbody>
          <tr>
            <td>Series A</td>
            <td>Product A</td>
            <td>
              <input type="radio" name="radios" id="radio1" />
              <label for="radio1">Yes</label>
            </td>
          </tr>
          <tr>
            <td>Series B</td>
            <td>Product B</td>
            <td>
              <input type="radio" name="radios" id="radio2" />
              <label for="radio2">No</label>
            </td>
          </tr>
          <tr>
            <td>Series C</td>
            <td>Product C</td>
            <td>
              <input type="radio" name="radios" id="radio3" />
              <label for="radio3">Maybe</label>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

【讨论】：

太棒了。谢谢！这很有帮助。

不客气，如果答案有效，请将其标记为已回答，以便其他人可以找到它。谢谢！