使用jQuery激活单选按钮

Question

我使用这个网站上所有有用的答案来尝试构建一个jQuery脚本来选择单选按钮，但是出现了某些问题导致它们不能正常工作。我做错了什么吗？为了简单起见，我从头开始重新开始。

在下面附上了PHP生成表单的格式。我尝试过多个浏览器，但无法让任何按钮选择任何内容。我是否忽略了某些复杂性？此页面是.php页面，并且该表单是由php生成的。

对于这个基础问题感到抱歉--非常感谢任何帮助。不确定是否相关，但我希望这些按钮可以在移动设备以及各种浏览器上正常工作。

表单代码：

    <form class="form-horizontal" method="get" action="submit.php" name="form">
    <div class="control-group">
        <div class="row-fluid">
            <div class="span2"></div>
            <div class="span8">
                <label class = "control-label" for="input1"> foreign policy </label>

                <div class="controls">
                    <label class="checkbox inline"><input type="radio" name="group1" id="1_l" value="1_l"> Liberal</label>
                    <label class="checkbox inline"><input type="radio" name="group1" id="1_m" value="1_m"> Moderate</label>
                    <label class="checkbox inline"><input type="radio" name="group1" id="1_c" value="1_c"> Conservative</label>
                </div>
            </div>
        </div>

        <div class="row-fluid">
            <div class="span2"></div>
            <div class="span8">
                <br>
                <center><button type="submit" class="btn btn-danger btn-large">Generate</button></center>
            </div>
            <div class="span2"></div>
        </div>
</form>

Jquery代码：

$('button').click(
function() {
    $('#1_l').attr('checked', true);
}
);

- asparagus

---

你的jQuery脚本是什么样子的？ - brazilianldsjaguar

我最初注意到的一件事是...ID通常应该以字母开头，而不是数字。你的单选按钮的ID都以数字1开头。如果没有其他问题，至少要更新这些ID，使第一个字符为字母。这可能不是你问题的原因，但我过去偶尔遇到与此规则相关的问题。 - Mike

这在HTML 4.0中是正确的，但从HTML5开始，id可以以数字开头。 - Sushanth --

@asparagus，它为什么不能工作？发生了什么事情？你期望什么？ - Explosion Pills

首先，我会使用一个不是提交按钮的DOM元素进行测试。你可能已经成功设置了检查，提交了表单，然后又得到了一个未选中该项的新页面。其次，你可以尝试使用click()而不是attr()。 - Dave

当我点击按钮时，它应该更改其中一个单选按钮。 - asparagus

Answer 1

请确保在 DOM 加载完成后再绑定处理程序：

$(function() {
  $('button').click(function() {
    $('#1_l').attr('checked', true);
  });
});

- Matt Whipple

Answer 2

使用jQuery中的“:checked”选择器来选择选中的输入，否则你只会得到第一个输入。

$(function () {

    $('button.btn').click(function () {
        var $box = $('.checkbox input:checked');
        if ($box.length > 0)
            alert($box.val());
    });

});​

- Roy

---

HTML 只允许您在单选按钮组中选择一个单选按钮。因此，您只能在 jQuery 的 "array" 对象中获得一个结果。如果是复选框，您可以使用 :first 或 .first() 选择器仅选择一个（第一个）选中的输入控件。 - Roy

我明白了区别...我的意思是OP给出的是单选按钮而不是复选框。 - mcgrailm

Answer 3

我看到您有一个未关闭的div，我已将其关闭。

我将按钮类型更改为按钮而不是提交，以便能够看到它的工作情况，所有都很好。

请点击此处查看我的演示

<form class="form-horizontal" method="get" action="submit.php" name="form">
    <div class="control-group">
        <div class="row-fluid">
            <div class="span2"></div>
            <div class="span8">
                <label class = "control-label" for="input1"> foreign policy </label>

                <div class="controls">
                    <label class="checkbox inline"><input type="radio" name="group1" id="1_l" value="1_l"> Liberal</label>
                    <label class="checkbox inline"><input type="radio" name="group1" id="1_m" value="1_m"> Moderate</label>
                    <label class="checkbox inline"><input type="radio" name="group1" id="1_c" value="1_c"> Conservative</label>
                </div>
            </div>
        </div>

        <div class="row-fluid">
            <div class="span2"></div>
            <div class="span8">
                <br>
                <center><button type="button" class="btn btn-danger btn-large">Generate</button></center>
            </div>
            <div class="span2"></div>
        </div>
    </div>
</form>​

这里是jQuery

$(function () {
    $('button').click(function() {
        $('#1_l').attr('checked', true);
    });​
}

- mcgrailm

---

由于某些原因，我已经添加了这个，但它似乎仍然无法正常工作。您知道为什么jQuery可能无法工作吗？ - asparagus

你会如何将jQuery脚本插入页面中？ - asparagus

请确保您已加载jQuery！编辑以包含jQuery函数。 - mcgrailm