Why console.log inside Jquery function no working

$("#radioButton").click(function() {
  console.log("clicked");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
        <li class="firstOne">Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
        <li id="list">Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
        <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
        <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
     </ul>

     <form action="">
         <label for="fname">First name:</label><br>
         <input type="text" name="fname" id="fname"><br>
         <label for="lname">Last name:</label><br>
         <input type="text" name="lname" id="lname"><br>
         <label for="text">This is a radio button</label>
         <input type="checkbox" name="radio" id='radioButton'> <br>
         <input type="submit" value="Submit">
     </form>

I would like to use the Jquery code to click the radioButton. However, with console.log("clicked") inside the function as above, the radio button would not be clicked. If the jquery is only $("#radioButton").click();, then the button can be clicked. I don't know why.