onclickがブートストラップで正常に動作しない

Question

ブートストラップのラジオボタンでonclickイベントを使用して名前と属性を取得しようとしましたが、うまくいかなかったようです。

一部のラジオボタンでイベントが発生しましたが、名前やクラス（「未定義」）が表示されず、一部で反応しませんでした。

<div class="theContainer">  
    <input type="radio" class="myClass" name="options" id="option1" onclick="updateODid()" autocomplete="off" > Radio 1 
    <input type="radio" class="myClass" name="options" id="option2" onclick="updateODid()" autocomplete="off"> Radio 2 
    <input type="radio" class="myClass" name="options" id="option3" onclick="updateODid()" autocomplete="off"> Radio 3 
    <input type="hidden" class="findme" value="found me!"> 
    <div class="btn-group" data-toggle="buttons"> 
    <label class="btn btn-primary active"> 
     <input type="radio" class="myClass" name="options" id="option1"  onclick="updateODid()" autocomplete="off" > Radio 1 
    </label> 
    <label class="btn btn-primary"> 
     <input type="radio" class="myClass" name="options" id="option2" onclick="updateODid()" autocomplete="off"> Radio 2 
    </label> 
    <label class="btn btn-primary"> 
     <input type="radio" class="myClass" name="options" id="option3" onclick="updateODid()" autocomplete="off"> Radio 3 
    </label> 
    </div> 
</div> 

jsfiddle.net/2sc8mc7L/6/

ありがとう！

Answer 1

javascriptとjqueryが混在しているため、動作しません。

更新スニペットを確認してください：https://jsfiddle.net/2sc8mc7L/12/ onclickの機能は以下のようにする必要があります：

$(".myClass").on('click',function(){ 
    radioButtonClick($(this)); 
}); 

$("label.btn-primary").on('click',function(){ 
    radioButtonClick($(this).find('.myClass')); 
}); 

function radioButtonClick(_this){ 
    alert("I'm in!") 
    alert (_this.attr('name')); 
    alert (_this.attr('class')); 
    alert (_this.closest(".theContainer").find(".findme").val()); 
} 

Answer 2

あなたは、このようonclickため使用updateODid(this)を試すことができますし、それが

function updateODid(button) 
 
\t { 
 
\t \t //alert("I'm in!") 
 
\t \t alert ($(button).attr('name')); 
 
    alert ($(button).attr('class')); 
 
    alert ($(button).closest(".theContainer").find(".findme").val()) 
 
\t }

<div class="theContainer"> 
 

 
    <input type="radio" class="myClass" name="options" id="option1" onclick="updateODid(this)" autocomplete="off" > Radio 1 
 
    
 
    <input type="radio" class="myClass" name="options" id="option2" onclick="updateODid(this)" autocomplete="off"> Radio 2 
 
    
 
    <input type="radio" class="myClass" name="options" id="option3" onclick="updateODid(this)" autocomplete="off"> Radio 3 
 

 

 
    <input type="hidden" class="findme" value="found me!"> 
 

 

 
    <div class="btn-group" data-toggle="buttons"> 
 
     <label class="btn btn-primary active"> 
 
     
 
    \t \t <input type="radio" class="myClass" name="options" id="option1"  onclick="updateODid(this)" autocomplete="off" > Radio 1 
 
     
 
     </label> 
 
     <label class="btn btn-primary"> 
 
     
 
\t  <input type="radio" class="myClass" name="options" id="option2" onclick="updateODid(this)" autocomplete="off"> Radio 2 
 
     
 
     </label> 
 
     <label class="btn btn-primary"> 
 
     
 
\t  <input type="radio" class="myClass" name="options" id="option3" onclick="updateODid(this)" autocomplete="off"> Radio 3 
 
     
 
     </label> 
 
    </div> 
 

 
</div><script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

現在のインスタンスを使用します