CODEWITHSUNDEEP
javascriptjqueryhtml
Ilyes
Ilyes

Reputation: 23

Radio button click event

In my code I wanted to create a question with 3 possible answers. The user clicks on one of them. then the question disappears. My problem is that the question disappears on load, before the user clicks on it.
PS: I'm new to programming and JavaScript so please try to dumb down your answers.
Thank you in advance. :)

$("input:radio").attr("checked", false);

function disappear(a) {
  $("#q" + a).fadeOut(1500);
}

$(".choice1").click(disappear(1));
<form id="q1">
  58*2=
  <br>
  <input type="radio" class="choice1" name="a1" value="1" />128
  <input type="radio" class="choice1" id="r1" name="a1" value="2" />116
  <input type="radio" class="choice1" name="a1" value="3" />126
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Upvotes: 2

Views: 155

Answers (5)

Carsten Massmann
Carsten Massmann

Reputation: 28196

Or, since there will be many questions, you could do

$("input:radio").attr("checked", false)
                .click(function(){$(this).parent('form').fadeOut(1500);})

Write less, do more ..., see here: http://jsfiddle.net/wm9gdr2n/1/

The click-function will find the relevant <form> that needs to be faded by using parent(). In case your checkboxes are packed into some <div> within the <form> you will have to use parents() instead, since parent()will only find the direct parent (which would then be the <div>).

This way you won't have to write 

$(".choice1").click(function(){disappear(1)});
$(".choice2").click(function(){disappear(2)});
$(".choice3").click(function(){disappear(3)});
...

for each question. And disappear(a) is obsolete.

(You might have to include some more detail to the selector if there are checkboxes on your page where you don't want this mechanism to happen.)

Upvotes: 1

XuChu LIU
XuChu LIU

Reputation: 238

You have fired the click event rather than defining a callback. A possible way for your need could be:

$("input:radio").attr("checked", false);

$(".choice1").click(function() {
   var me = $(this), index = me.attr('name').substring(1); 
   $('#q' + index).fadeOut(1500);
   
});
<form id="q1">
  58*2=
  <br />
  <input type="radio" class="choice1" name="a1" value="1" />128
  <input type="radio" class="choice1" id="r1" name="a1" value="2" />116
  <input type="radio" class="choice1" name="a1" value="3" />126
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

The main change in the above code was to read the index from the "name" of the radio boxes. This is to avoid passing the index like "1" from the arguments.

Upvotes: 1

Shaunak D
Shaunak D

Reputation: 20626

The problem is with your click handler.

$(".choice1").click(disappear(1));

The above calls the function disappear on load as you are not passing a reference of the function as a callback.

Write a valid anonymous callback for the handler

$(".choice1").click(function(){
    disappear(1)
});

As a side note you can pass a function reference in a handler like below, considering it is parameterless. Else you would need a anonymous func wrap as explained above.

    $(".choice1").click(disappear);

Upvotes: 2

Jackson
Jackson

Reputation: 3518

You should use the 'change' event instead as it will fire only when the radio button is changed

$("input:radio").attr("checked", false);

function disappear(a) {
  $("#q" + a).fadeOut(1500);
}

$(".choice1").on('change', function(){
  disappear(1);
});
<form id="q1">
  58*2=
  <br>
  <input type="radio" class="choice1" name="a1" value="1" />128
  <input type="radio" class="choice1" id="r1" name="a1" value="2" />116
  <input type="radio" class="choice1" name="a1" value="3" />126
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Upvotes: 1

Namit Singal
Namit Singal

Reputation: 1516

Instead of creating an event handler, you are actually triggering click event. 

$(".choice1").click(disappear(1));

triggers the click event, doesn't bind it to the class.

this is how you bind click to a class: - 

$("input:radio").attr("checked", false);

function disappear(a) {
  $("#q" + a).fadeOut(1500);
}

$(".choice1").click(function(){
    disappear(1);
});

Upvotes: 1

Related Questions