jquerymouseenter

jQuery checkbox events not working. How do I get this to work?

I have a search form with id sbox and a checklist below it. I'd like to set a mouse enter or focus event such that when somebody has the mouse selected in the sbox div, the first item of the checklist gets checed. It's not working on my site right now.

I want the first checkbox checked with the mouse enter moves to sbox. My jQuery is below but the mouse enter event is not working. I've tried the focus event as well but it's not working.

Edit: Added CSS later on

$(document).ready(function() {

  $("#sbox").on('mouseenter', function() {
    $("#item_0").prop("checked", true);
  });

  $(".website_checklist").contents().find(":checkbox").bind("change", function() { // Find all checkboxes in the div website_checklist on change
    val = this.checked, $(this).parent().toggleClass("checked"); // Give this item the class "checked"
  });
  $(".website_checklist").contents().find(":checkbox").bind("focus", function() { // Find all checkboxes in the div website_checklist on bind
    val = this.focused, $(".focus").removeClass("focus"), $(this).parent().addClass("focus"); // Remove all focus and then add focus class to this one
  });

  setTimeout(function() {
    $("#calcsuccess").fadeOut("slow");
  }, 3000);

  $("#sbox").on("paste", function() {
    setTimeout(function() {
      $("#button-addon2").trigger("click");
    });
  });

  var value = $('#sbox').val();

  if (!$.trim(value) || value === null) {
    $('#button-addon2').hide();
    $('#image-upload').show();
  } else {
    $('#button-addon2').show();
    $('#image-upload').hide();
  }


});

function buttonChange(val) {
  if (val) {
    $('#button-addon2').show();
    $('#image-upload').hide();
  } else {
    $('#button-addon2').hide();
    $('#image-upload').show();
  }
}
.website_checklist p {
  padding-bottom: 0;
  font-size: 20px;
  color: #1d0d6f;
  padding: 20px 20px 5px 20px
}

.website_checklist ul {
  list-style: none !important;
  /* Remove the list style */
  padding: 15px 0 0 0 !important
}

.website_checklist ul label {
  font-size: 16px;
  line-height: 1.4;
  padding: 13px 24px 13px 64px;
  display: block;
  position: relative;
  z-index: 100;
  cursor: pointer
}

.website_checklist ul input,
.website_checklist ul li.focus:before {
  left: 0;
  top: 0;
  position: absolute
}

.website_checklist li {
  position: relative
}

.website_checklist ul li.focus:before {
  left: 0;
  top: 0;
  position: absolute
}

.website_checklist ul input {
  opacity: 0
}

.website_checklist ul li.focus:before,
.website_checklist ul span.input:before {
  content: ""
}

.website_checklist ul span.input {
  background-image: linear-gradient(90deg, #1d0d6f 0, #5430ce 100%);
  background-color: #1d0d6f;
  width: 26px;
  height: 26px;
  left: 24px;
  top: 10px
}

.website_checklist ul span.input:before {
  width: 22px;
  height: 22px;
  top: 2px;
  left: 2px
}

.website_checklist ul span,
.website_checklist ul span:after,
.website_checklist ul span:before {
  display: block;
  position: absolute;
  background: #fff;
  border-radius: 50%
}

.website_checklist ul li.checked span.input {
  /* CSS to make the background green when checked - we add the class checked using javascript */
  background: #0af2a5
}

.website_checklist ul li.checked span.input:before {
  background: #0af2a5
}

.website_checklist ul li.checked label {
  /* when checked, make the text have a line through */
  text-decoration: line-through
}

.website_checklist ul li.checked.focus:before {
  background: #888
}

.website_checklist ul li.focus {
  background: #fafafa
}

.website_checklist ul li.checked {
  background: #f1f1f1
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form action="search.php" method="get" id="fsbox" class="input-group header-input" class="w-60">
  <input type="search" class="form-control search-input-style" id="sbox" aria-label="Enter your math problem or search term" name="q" autofocus required="required" autocomplete="off" value="" onkeyup="buttonChange(this.value)" placeholder="">
  <button class="btn search-button" style="background: #D41034; color: #fff;" type="submit" id="button-addon2">&raquo;</button>
  <div class="choose_file image-search-button" id="image-upload" style="z-index: 999;">
    <span><img width="40px" height="40px" src="assets/images/camera.png" alt="Camera for Math Problems" /></span>
    <input name="Select File" type="file" id="uploadImage" aria-label="Upload or Snap a Photo of your Math Problem" accept="image/*" capture="capture" />
  </div>
</form>
<div class="website_checklist">
  <div class="checklist_header">
    <h4>Pre-launch checks</h4>
  </div>
  <ul>
    <li><input type="checkbox" name="item_0" id="item_0"><label for="item_0">List item 1</label><span class="input"></span></li>
    <li><input type="checkbox" name="item_1" id="item_1"><label for="item_1">List item 2</label><span class="input"></span></li>
    <li><input type="checkbox" name="item_2" id="item_2"><label for="item_2">List item 3</label><span class="input"></span></li>
  </ul>
</div>

Solution

  • In your code it seems the checkbox event is not automatically trigger when you hover over the div area.

    To solve this you can use .trigger() this will trigger the event handler for checkbox.

    i.e:

    $("#item_0").prop("checked", true).trigger('change');