Question

我试着在鼠标悬停时检查我的单选按钮而不点击。它是做显示照片的时候。我尝试用JQuery做这个，但我是初学者。

Answer 1

您可以让无线电监听mouseenter个事件，此时您可以在当前无线电上触发click事件，或者将无线电的checked属性明确设置为{{ 1}}。请注意，无线电和复选框需要使用true而不是.prop()，因为在HTML中，它们在技术上没有值，它们只是一个命名属性。

.attr()

$(function() {
  $(':radio').on('mouseenter', function() {
    $(this).prop('checked', true);
  });
});

Answer 2

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
   </style>
</head>
<body>
  <label>
    <input type="radio" name="photo" data-image="http://placehold.it/350x150" class="radio-hover">
    Option - 1
  </label>
  
  <label>
    <input type="radio" name="photo" data-image="http://placehold.it/250x150" class="radio-hover">
    Option - 2
  </label>
  
  <br>
  
  
    <img src="http://placehold.it/350x150" class="photo1" alt="">


  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
  <script>
    $(".radio-hover").hover(function(){
      var imageUrl = $(this).data("image");
      $("img").show();
      $("img").attr("src",imageUrl);
    },function(){
      $("img").hide();
    });
  </script>
</body>
</html>

鼠标悬停时检查单选按钮

2 个答案: