onclick не работает должным образом с bootstrap

Question

Я попытался использовать событие onclick с помощью переключателей Bootstrap, чтобы получить имена и атрибуты, но некоторые из них не прошли хорошо.

Некоторые из радиокнопки вызывали событие, но не получили имя или класс («undefined»), а некоторые не ответили вообще.

<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

Вы можете попробовать, как это, используйте updateODid(this) для onclick и он будет использовать текущий экземпляр

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>