2

是否可以通过鼠标悬停事件来控制单选按钮的显示?

目标是当鼠标悬停时它看起来被选中,而当鼠标离开时它看起来未被选中。但它只有在被点击时才会被检查,就像评级一样。

4

2 回答 2

0

你可以使用这样的东西:

$("input:radio").hover(function(){
        $(this).prop('checked', true);
}, function(){
        //MouseOut event
        $(this).prop('checked', false);
}).click(function(){
    //Unbind the hover event for all the radio buttons
    $("input:radio").unbind('mouseenter mouseleave')
    //Check clicked radio button
    $(this).prop('checked', true);
});

我为你做了一个小提琴:http: //jsfiddle.net/B6qBz/

于 2013-02-07T09:24:43.840 回答
0

在摆弄了一下之后,我想出了这个......看看这个小提琴,看看是否有诀窍......哦,既然你没有提到任何特定的语言,所以我用 jQuery 实现了这个......希望它帮助

这可能不是完美的解决方案,但绝对符合要求:

HTML:

<input type="radio" name="cols" id="col-1" />
<br />
<input type="radio" name="cols" id="col-2" />
<br />
<input type="radio" name="cols" id="col-3" />

JS:

var clicked = false;
var clickedId;

$('input').click(function () {
    clicked = true;
    clickedId = $(this).attr('id');
});
$('input').hover(function () {
    $(this).prop('checked', true);
}, function () {
    if (clicked === true) {
        $('#' + clickedId).prop('checked', true);
    } else {
        $(this).prop('checked', false);
    }

}); 
于 2013-02-07T09:28:16.433 回答