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

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> 

<label>各自的value属性是用于过滤目的重要。所以我想做一个函数，当你点击其中一个按钮时，函数管理返回（或者至少使用）一个人点击的标签的值。为了检查，我只想使用console.log表达式。理想情况下，我会在控制台中看到“TE”或“TK”或“LI”。

$(".type_of_txt_btn_group label").on("click",function() {   
     var filteringType = "" 
     filteringType = $(this).val() 
     console.log(filteringType); 
}); 

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

这是返回一个空字符串，如果是的话，为什么？它实际上是否像我想要的那样返回标签元素的值，或者是错误的？我能做些什么来解决它？

Answer 1

您也可以访问使用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>

请参阅代码above.Hope这是你在找什么。

Answer 2

您不能访问label的值val()，因为它只支持表单元素。您可以使用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>