如何在 Jquery 中切换选中的单选按钮？

Question

我创建了两个单选按钮：

<form>
        <p><input type="radio" name="center" value="center">Center</p>
        <p><input type="radio" name="right" value="right">Lower Right</p>
    </form>

和一个 jquery 脚本来移动一个 div 的位置，它正在工作，但我有两个问题：

1) 当我选中一个单选按钮时，当我选中另一个单选按钮时，它不会被取消选中，因为我使用了不同的名称，我将需要点击事件。

2) 中心位置和右下角是硬编码的。

任何想法都会受到赞赏。

<script>
            $(function(){
                $(init);
                function init(){
                    $('#target').draggable();
                }
                $('input[name=center]:radio').click(function(){
                    $('#target').css({
                        position:'absolute',
                        top:200 + 'px',
                        left:45 + 'px'
                    });
                });
                $('input[name=right]:radio').click(function(){
                    $('#target').css({
                        position:'absolute',
                        top:550 + 'px',
                        right:200 + 'px'
                    });
                });
            });
    </script>

Answer 1

使用 ID 属性来区分单击事件处理程序中的元素。保持单选按钮名称相同。这样，您就不必破解解决方案；您可以使用浏览器的默认功能：

<form>
    <p><input type="radio" id="center" name="someFormValue" value="center" />Center</p>
    <p><input type="radio" id="right" name="someFormValue" value="right" />Lower Right</p>
</form>