Question

在这里学习Javascript，只是停留了一会儿。我在html中有一个按钮组，使用以下内容构建。

<div class="button-holder type_of_txt_btn_group" data-toggle="buttons">
                            <label class="btn btn-primary active" value="TE">
                                <input name="text" type="radio" id="txtbutton_id">Text
                            </label>
                            <label class="btn btn-primary" name="textbook" value="TK">
                                <input name="textbook" type="radio">Textbook
                            </label>
                            <label class="btn btn-primary" name="list" value="LI">
                               <input name="list" type="radio" value="list">List
                            </label>
                        </div>

每个value的{{1}}属性对于过滤目的非常重要。所以我想创建一个函数，当你单击其中一个按钮时，该函数设法返回（或至少使用）一个人点击的标签的值。要检查，我想简单地使用console.log表达式。理想情况下，我会在控制台中看到“TE”或“TK”或“LI”。

<label>

但到目前为止，这一直在我的控制台中产生似乎是空字符串的东西，我现在还不确定为什么。这是我在小提琴上创建的版本。 https://jsfiddle.net/12rsob36/1/

这会返回一个空字符串，如果是这样，为什么？它实际上是否像我希望的那样返回标签元素的值，或者是错误的？我该怎么做才能解决它？

Answer 1

您无法使用val()访问label的值，因为它只支持表单元素。您可以使用data()功能，并将data-x属性设置为按钮。

此外，official documentation建议使用<button>代替<label>：

 $(".type_of_txt_btn_group button").on("click",function() {
       var filteringType = $(this).data('value')
       console.log(filteringType);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="button-holder type_of_txt_btn_group btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default" data-value="TE">Text</button>
  <button type="button" class="btn btn-default" data-value="TK">Textbook</button>
  <button type="button" class="btn btn-default" data-value="LI">List</button>
</div>

Answer 2

您还可以使用attr()方法访问标签的值。它设置或返回所选元素的属性值。

$(".type_of_txt_btn_group label").on("click", function() {

  var filteringType = ""
  var label = $(this).attr('name');
 // filteringType=label.attr('name');
  alert(label);
});

<div class="button-holder type_of_txt_btn_group" data-toggle="buttons">
  <label class="btn btn-primary active" name="text">
    <input name="text" type="radio" id="txtbutton_id" value="text">Text
  </label>
  <label class="btn btn-primary" name="textbook">
    <input name="textbook" type="radio" value="textbook">Textbook
  </label>
  <label class="btn btn-primary" name="list">
    <input name="list" type="radio" value="list">List
  </label>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

请参考上面的代码。希望这就是你要找的。

Bootstrap 3按钮组，试图获取单击哪个按钮的值

2 个答案: