带有 jquery 的活动单选按钮答案

【问题标题】：Active radio button with jquery带有 jquery 的活动单选按钮
【发布时间】：2012-09-23 14:22:22
【问题描述】：

我使用此站点上所有有用的答案来尝试构建一个 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);
}
);

【问题讨论】：

你的 jQuery 脚本是什么样的？
我最初注意到的一件事...... ID 通常应该以字母开头，而不是数字。您的无线电输入的 ID 都以数字 1 开头。如果没有别的，我至少会更新这些，所以第一个字符是一个字母。可能不是您的问题的原因，但我过去偶尔会遇到与该规则相关的问题。
在 HTML 4.0 中确实如此，但从 HTML5 开始，id 可以以数字开头
@asparagus 以什么方式不起作用？发生什么了？你期待什么？
首先，我将使用一个不是提交按钮的 DOM 元素进行测试。您很可能成功地设置了检查，提交了表单，然后返回一个未选中项目的新页面。其次，您可以尝试使用 click() 而不是 attr()

标签： php jquery select button radio

【解决方案1】：

这是我看到你有一个没有关闭的 div 我关闭了它

我将按钮类型更改为按钮而不是提交，所以我可以看到它工作并且一切都很好

See my working DEMO

<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);
    });
}

【讨论】：

出于某种原因，我把它放进去，它似乎仍然不起作用。你知道为什么 jQuery 可能不工作吗？
如何将 jquery 脚本插入页面？
已编辑以包含 jQuery 函数。确保您正在加载 jQuery！

【解决方案2】：

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

$(function () {

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

});

【讨论】：

HTML 只允许您在单选按钮组中选择一个单选按钮。因此，您只能在 jQuery“数组”对象中得到一个结果。如果是复选框，您可以使用 :first 或 .first() 选择器仅选择一个（第一个）选中的输入控件。
对，我明白了……我的意思是 OP 给了单选按钮而不是 checkoxes

【解决方案3】：

确保仅在加载 DOM 后绑定处理程序：

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

【讨论】：