Удаление .click, но все еще прикрепление функции к входу - Викторина исчезает на входе

Question

Код работает !!

Теперь у меня есть тест, который выполняет следующее: пользователь выбирает один из переключателей. При отправке выбранный ответ исчезает. Спасибо всем, кто внес вклад в ответ.

** Кнопка отправки не передает в базу данных или другой язык сценариев

// **************  Quiz 2 (right side) ********************//
var selectAnswer = function(){  
var answer = $("input[name='radio2']:checked").val();
    console.log(answer);
         if(answer=='correct2') {
            $("#quiz2").fadeOut(function(){
                 $("#correct2").fadeIn();             
              });
          $("#wrong1a").hide();
          }
    if(answer=='wrong1a') {
         $("#quiz2").fadeOut(function(){
             $("#wrong1a").fadeIn(); }
         )};

    if(answer=='wrong2a') {
         $("#quiz2").fadeOut(function(){
             $("#wrong2a").fadeIn(); }
             )};

    if(answer=='wrong4a') {
         $("#quiz2").fadeOut(function(){
             $("#wrong4a").fadeIn(); 
         }); 

        $("#correct2").hide();

        }
        //end of of selectAnswer\

// end of of selectAnswer
};
$(document).ready(function(){  // when the submit button is pressed, run selectAnswer function
    $("#submitButton2").click(selectAnswer);

 $("#correct2").hide();
$("#wrong1a").hide();

});

HTML

<div class="inputs_bg4"><input name="radio2" type="radio" value="wrong1a"></div></td>
<div class="inputs_bg4"><input name="radio2" type="radio" value="wrong2a"></div></td>
<div class="inputs_bg3"><input name="radio2" type="radio" value="correct2"></div></td>
<div class="inputs_bg4"><input name="radio2" type="radio" value="wrong4a"></div></td>

Answer 1

Попробуйте это (демо здесь ):

    $("#submitButton2").click(function(){ //I would just add a click handler to the submit button
        var answer = $("input:checked").val(); //this finds the value of the selected radio button
console.log(answer);
     if(answer=='correct2') {
        $("#quiz2").fadeOut(function(){
             $("#correct2").fadeIn();             
          });
      $("#wrong1a").hide();
      }
    if(answer=='wrong1a') {
         $("#quiz2").fadeOut(function(){
             $("#wrong1a").fadeIn(); }
         )};

    if(answer=='wrong2a') {
         $("#quiz2").fadeOut(function(){
             $("#wrong2a").fadeIn(); }
             )};

    if(answer=='wrong4a') {
         $("#quiz2").fadeOut(function(){
             $("#wrong4a").fadeIn(); 
         }); 
        $("#correct2").hide();
        }
        event.preventDefault();
    });
$('#reset').click(function(){
    $('#quiz2').show();
    $('#answers div').hide();    
});

Answer 2

Использование .change () в списке переключателей должно исправить это.

$("input[name=radio2]").bind("change", function(){});

Убедитесь, что вы поместили эту привязку куда-то, что читается после загрузки переключателей, но до того, как пользователь сможет реально манипулировать переключателями.

Редактировать: Если вы просто пытаетесь запустить функцию только после выбора, я остановился на (непроверенном) решении ниже.

function selectAnswer(radio_name){
    val = $("input[name='" + radio_name + "']").val();
    //Do what you will
}

$("#submitbutton").bind("click", function(){  selectAnswer("radio2")   });

Answer 3

var selectAnswer = function(){         
  var answer = $("input[name='radio2']:checked").val();   
     if(answer=='correct2') {
        $("#quiz2").fadeOut(function(){
             $("#correct2").fadeIn();             
          });
      $("#wrong1a").hide();
      }
    if(answer=='wrong1a') {
         $("#quiz2").fadeOut(function(){
             $("#wrong1a").fadeIn(); }
         )};

    if(answer=='wrong2a') {
         $("#quiz2").fadeOut(function(){
             $("#wrong2a").fadeIn(); }
             )};

    if(answer=='wrong4a') {
         $("#quiz2").fadeOut(function(){
             $("#wrong4a").fadeIn(); 
         }); 

        $("#correct2").hide();

        }
        });//end of of selectAnswer
}

Answer 4

Просто удалите $("input[name='radio2']").click(function() {} вокруг selectAnswer и используйте var answer = $("input[name='radio2']:checked").val(); в первой строке.