Javascript 启动单选按钮激活时附加标记

我正在使用Bootstrap3中的javascipt单选按钮

HTML:

仅当“.btn”具有类“活动”时，我才需要附加此项：

取得

<label class="btn btn-primary active">
    <span class="glyphicon glyphicon-ok"></span><!-- appended markup -->
    <input type="radio" name="options" id="option1" checked> Option 1 (preselected)
  </label>

选项1（预选）

有人能帮忙吗

---

谢谢你

用普通的ole CSS这样做怎么样：

CSS:

.add-check .active:before {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e013";
}

HTML:（我只添加了一个类

。将check

添加到按钮组，以便您可以针对特定的按钮组）

选项1（预选）
选择2
选择3

---

用普通的ole CSS这样做怎么样：

CSS:

.add-check .active:before {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e013";
}

HTML:（我只添加了一个类

。将check

添加到按钮组，以便您可以针对特定的按钮组）

选项1（预选）
选择2
选择3

---

您可以添加一些jQuery魔术，使其达到您想要的效果。我只是在HTML中添加了下面的元素，但是使用了

hide

类将其隐藏起来，直到需要为止

HTML:

其中，单击标签，span将删除

隐藏

类，从而在将类添加到其他两个输入时显示复选标记。这应该对你有用，我建议你也改变一下名字方案。下面是一个例子

编辑

---

我更新了fiddle，这样预先选择的选项将自动以复选标记开始，希望能够创建您想要的体验。

您可以添加一些jQuery魔术，使其实现您想要的功能。我只是在HTML中添加了下面的元素，但是使用了

hide

类将其隐藏起来，直到需要为止

HTML:

其中，单击标签，span将删除

隐藏

类，从而在将类添加到其他两个输入时显示复选标记。这应该对你有用，我建议你也改变一下名字方案。下面是一个例子

编辑

---

我更新了fiddle，以便预选选项将自动以复选标记开始，希望创建您想要的体验。

您知道，只是为了在混合中加入纯CSS解决方案：

.active-display-only { display:none; }
.active > .active-display-only { display:inline-block; }

然后，在每个按钮中放置图示符图标：

<label class="btn btn-primary">
    <span class="glyphicon glyphicon-ok active-display-only"></span>
    <input type="radio" name="options" id="option1" checked> Option 1 (preselected)
</label>

选项1（预选）

你知道，只要把一个纯粹的CSS解决方案加入到混合中就可以了：

.active-display-only { display:none; }
.active > .active-display-only { display:inline-block; }

然后，在每个按钮中放置图示符图标：

<label class="btn btn-primary">
    <span class="glyphicon glyphicon-ok active-display-only"></span>
    <input type="radio" name="options" id="option1" checked> Option 1 (preselected)
</label>

选项1（预选）

啊，废话，我想我更喜欢你的答案，而不是我自己的：（…我想我应该给你+1:-pLMAO…是的，有时我也会这么想。谢谢+1。我不喜欢jQuery的人…很好，纯CSS解决方案，这需要更多的技巧。这是一个出色的解决方案！谢谢@jme11ah废话，我想我更喜欢你的答案而不是我自己的：（…我想我应该给你+1:-pLMAO…是的，有时我也会这么想。谢谢+1。我不喜欢jQuery的人…很好，纯CSS解决方案，这需要更多的技巧。这是一个出色的解决方案！谢谢@jme11

$('#tester').on('click', function () {
    $('#test').removeClass('hide');
    $('#test2').addClass('hide');
    $('#test3').addClass('hide');
});

.active-display-only { display:none; }
.active > .active-display-only { display:inline-block; }

<label class="btn btn-primary">
    <span class="glyphicon glyphicon-ok active-display-only"></span>
    <input type="radio" name="options" id="option1" checked> Option 1 (preselected)
</label>