将输入单选更改为大 div 框

Question

我试图弄清楚如何隐藏单选按钮，而是使用 div 框，以便用户可以点击大框而不是小按钮。

这可能吗？

Answer 1

通过单击将divs 与单选按钮相关联，然后您就设置好了。

<div class="radio-wrap"><input type="radio"></div>


$('div.radio-wrap').click(function(e){
  $(this).find('[type=radio]').attr('checked',true);
});

您可以使用 css 隐藏无线电输入或将其移动到您想要的位置。

Answer 2

jQuery UI 提供了一个buttonset 可能起作用的功能：

<div id="radio"  align="center" >
<input type="radio" name ="gender" id="male" value="MALE" checked="checked"/><label for="male">MALE</label>
            <input type="radio" name ="gender" id="female" value="FEMALE" /><label for="female">FEMALE</label>
</div> 

和脚本

$(function() {
        $( "#radio" ).buttonset();
    });

Demo