JSFiddle - React, Tailwind, and code Playground

HTML

<input id="use" type="checkbox" value="Any Value" checked="checked" /><label for="use">Click Me</label>

<h5>Results:</h5>
<div>$("#use").val(): <span id="1"></span>
</div>
<div>$("#use").attr("checked"): <span id="2"></span>
</div>
<div>$("#use").prop("checked"): <span id="3"></span>
</div>
<div>$("#use")[0].checked): <span id="4"></span>
</div>
<div>$("#use").is(":checked"): <span id="5"></span>
</div>

CSS

span {
  color: #00AA00
}
div {
  margin-bottom: 6px;
}

JavaScript

$("#use").change(function() {

    $("#1").text(
      $("#use").val());

    $("#2").text(
      $("#use").attr("checked"));

    $("#3").text(
      $("#use").prop("checked"));

    $("#4").text(
      $("#use")[0].checked);

    $("#5").text(
        $("#use").is(":checked"));
  }).trigger("change");