How to display user inputs onclick event in jquery

I have a form with different fields like radiobutton, checkbox and list menu(dropdown). After completion of user input he will click a button like show preview. Then how can i display userinput based on selection in onclick event in jquery?

<input type = "checkbox" id="stateid" name="stateid" value="">
<input type = "radio" id="gender" value="male">

Solution

I think this code can help you......

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>name</title>
 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>

 $(document).ready(function(){  
   $('#preview').click(function(){

   $('input[id="stateid"]:checked').each(function() {
        console.log(this.value);
    });


    console.log($('input[id="gender"]:checked').val());


    console.log($('option[id="car"]:checked').val());
 })
 })
 </script>

</head>
<body>
<input type = "checkbox" id="stateid" name="stateid" value="first">first<br />
<input type = "checkbox" id="stateid" name="stateid" value="Second">Second<br/>


 <input type = "radio" name="gender" id="gender" value="male">male
<input type = "radio" name="gender" id="gender" value="female">female
    <br />
    <select id="dropdown">
 <option id="car" value="volvo">Volvo</option>
<option id="car" value="saab">Saab</option>


</select>
     <br />
    <button type="button" id="preview">Show Preview</button>

 </body>
 </html>

Check this fiddle http://jsfiddle.net/k4dtx16q/2/