默认情况下选中单选按钮-JQuery事件不起作用

Question

I have a radio button already clicked in html, and I need some help figuring out how to apply the event in JQuery for the already clicked button. Right now, if the button is already clicked there is no event happening, but if i click again it does what it's supposed to do. I have 2 radio buttons, the first one is already clicked for a message in a div to be hidden, is the second radio is checked then the message with show. I have problems implementing the already clicked radio. This is the html:

<label for="answer">Answers:</label><input type="radio" name="type" value="Yes/No" class="answers" checked="checked" id="answer"><span> Yes/No Form </span> <br><input type="radio" name="type1" value="Multiple" class="move"> <span>Multiple choice form </span><br>

And this is the JQuery so far:

$(".answers").click(function(e) {
    e.preventDefault();
    $("div.desc").hide();
}); 

$(".move").click(function(e) {
    e.preventDefault();
    $("div.desc").show();
}); 

If anyone can please help, thank you!

Answer 1

Since you are wanting to hide the div on page load, just utilize CSS.

Add a display to your CSS class:

div.desc {
    display: none;
}

Or to the div element itself.

<div class="desc" style="display: none;">omg</div>

This will hide the element on page load, allowing you to show/hide the form as needed.

For completeness, here is a JSFiddle .

Answer 2

there are multiple option to hide $("div.desc") at the time of page :

1). at the time of DOM ready just call a trigger event, it will fire a click event like:

$(".answers").trigger("click")

OR

2). just add a simple condition to explicitly hide the content on page load like:

$("div.desc").hide();