ブートストラップ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属性は、フィルタリングの目的のために重要です。だから私は、ボタンの1つをクリックすると、そのボタンがクリックされたラベルの値を返す（または少なくとも使用する）という機能を作りたいと思っています。チェックするために、私は単に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()メソッドを使用してラベルの値にアクセスすることができます

さらにofficial documentationではなく<label>の<button>を使用することを提案しています。選択された要素の属性の値を設定または返します。

$(".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属性を設定することができます。

$(".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>