Question

我正在尝试使用javascript中的Bootstrap设置一组单选按钮

我正在尝试的代码是：

        var viewedFilterButtons = $("<div>").addClass("btn-group").attr("data-toggle", "buttons");
        viewedFilterButtons.append($("<label>").addClass("btn").addClass("btn-primary").append($("<input>").attr("id", "viewed-important").attr("type","radio").attr("name","viewed-filter").attr("value","important").attr("autocomplete","off").append($("<label for=\"viewed-important\">").text("Important"))));
        viewedFilterButtons.append($("<label>").addClass("btn").addClass("btn-primary").append($("<input>").attr("id", "viewed").attr("type","radio").attr("name","viewed-filter").attr("value","viewed").attr("autocomplete","off").text("Reviewed")));

（请注意，我正在尝试两种不同的方法来将文字输入按钮 - 在第一个input我嵌入了label，而在第二个我只是想尝试设置text的{{1}}。现在都没有。）

这将生成以下HTML：

input

请注意，在第二种情况下似乎没有关闭输入。我从Firefox中的Web控制台检查器获取此HTML。

我得到的是一组没有文字的微小单选按钮。切换行为正常。

我在这里缺少什么？当我直接在HTML中为这样的单选按钮手动生成一组标签时，它可以正常工作。

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input id="viewed-important" name="viewed-filter" value="important" autocomplete="off" type="radio">
      <label for="viewed-important">Important</label>
    </input>
  </label>
  <label class="btn btn-primary">
    <input id="viewed" name="viewed-filter" value="viewed" autocomplete="off" type="radio">Reviewed
  </label>
</div>

Answer 1

这是因为您将<label>添加到<input/>。

中

你正试图这样做：

<input> <label>Important</label> </input>

但是，<input/>是一个自动关闭标记，而不是像<div>这样的容器。你应该像这样设计你的结构：

<label> <input/> Important </label>

Answer 2

输入元素不能包含子w3 specification。把标签贴在后面。

var viewedFilterButtons = $("#mainDiv").addClass("btn-group").attr("data-toggle", "buttons");
        
   var inputElem = $("<input>").attr("id", "viewed-important").attr("type","radio").attr("name","viewed-filter").attr("value","important").attr("autocomplete","off");
  
  viewedFilterButtons.append(inputElem)
                     .append($("<label for=\"viewed-important\">").addClass("btn").addClass("btn-primary").text("Important"));

<link href="https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css" rel="stylesheet"/>
<div id="mainDiv"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

以编程方式设置Bootstrap单选按钮文本

2 个答案: