Question

我有来自jquery的10个单选按钮/按钮组。当然每个按钮都有自己的值，我想在按钮悬停时显示按钮旁边的值。

我该如何处理？

插图

row1：radio1.1 radio1.2 radio1.3 打印值收音机在这里   收音机徘徊

row2：radio2.1 radio2.2 radio2.3 打印值收音机在这里   收音机徘徊

row3：radio3.1 radio3.2 radio3.3 打印值收音机在这里   收音机徘徊

我使用了来自jquery的live function来获取事件鼠标悬停，但是我如何具体将值放入特定行？

我如何才能获得哪个无线电广播，以便获得它的价值？

<!DOCTYPE html>
    <html>
    <head>
        <link href="jslib/jquery_theme/jquery.ui.all.css" rel="stylesheet" type="text/css"/>
      <script src="jslib/jquery-1.7.1.min.js"></script>
      <script src="jslib/jquery-ui-1.8.18.custom.min.js"></script>

      <script>
      $(document).ready(function() {
        $(".ter").buttonset();
      });



      $('.ter > label').live('mouseover mouseout', function(event) {
      if (event.type == 'mouseover') {
        document.getElementById('mydiv').innerHTML = "Hello World";
      //this is when radio is hovered, it should show radio value beside the rwadio
      } else {
         document.getElementById('mydiv').innerHTML = "out";
         //this is when mouse is out from radio
      }
});

$(function() {
    $("#radio :radio").change(function(e) {
       alert(
           "run ok"
       );
    });
});



  </script>


</head>
<body style="font-size:62.5%;">

<div id="radio">
    <form name='tes' method='post' action='a.php'>
    <?php for($I=0;$I<10;$I++){ 

        echo"
        <div class='ter' style='border:1px solid; width:400px; margin-bottom:5px;'>

    <input type='radio' id='radio1.$I' name='radio.$I' value='4' /><label for='radio1.$I'>  </label>
    <input type='radio' id='radio2.$I' name='radio.$I' checked='checked' value='3' /><label for='radio2.$I'> </label>
    <input type='radio' id='radio3.$I' name='radio.$I' value='2' /><label for='radio3.$I'> </label>
        <input type='radio' id='radio4.$I' name='radio.$I' value='1'/><label for='radio4.$I'> </label>
        <span id='mydiv'>aaaaaaaaaa</span> 
        </div>  ";
         } ?>
        <div class='ter'>
        <input type='submit' value ='submit'>
        </div>
    </form> 

</div>

</body>
</html>

Answer 1

$('.ter > label').live('mouseover mouseout', function(event) {
  if (event.type == 'mouseover') {
    document.getElementById('mydiv').innerHTML = $("#"+$(this).attr("for")).val();
  //this is when radio is hovered, it should show radio value beside the rwadio
  } else {
     document.getElementById('mydiv').innerHTML = "";
     //this is when mouse is out from radio
  }

这将使无线电值对应于标签，现在您可以相应地定位div。

Answer 2

据我所知，事件将出现在单选按钮

$('input[type=radio]').live({
   mouseover:function(){
      var value = $(this).attr('value');
      $(this).next().html(value);
   },
   mouseout:function(){
      $(this).next().html("");
   }
});

当单选按钮悬停时，获取它的值并将其打印在标签中（下一个）。

Answer 3

您可以在没有javascript的情况下实现此效果，仅使用HTML和CSS：

<强> HTML

<form>
   <label><input type="radio" name="Test" value="Something"/></label>
   <label><input type="radio" name="Test" value="Something else"/></label>
</form>

<强> CSS

input:hover:after,
input:focus:after {
    content: attr(value);
    padding-left: 2em;
}

这利用了CSS content属性来提取和显示应用它的元素的值。您可能需要使用CSS来设置它的样式 - 我正在考虑相对于每一行的绝对定位。

这在旧版本的IE中无效。 8+肯定会工作 - 我不确定7及以下。

悬停时的Jquery单选按钮值

3 个答案: