Question

我正在使用两组单选按钮

第1组：

国家
市

第2组：

A-C
d-H
我-M
N-R
S-Z

当我在州和城市之间切换时，我希望将第2组中的A-C设置为已选中，而其他组则设置为未选中。

我在这里工作fiddle

HTML：

<div id="sort-radio">
    <input type="radio" id="byState" name="sort-radio" checked="checked"/><label for="byState">By State</label>
    <input type="radio" id="byCity" name="sort-radio"/><label for="byCity">By City</label>
</div>

<div id="alphabet-radio" style="width:300px;">
<input type="radio" id="A-C" name="alphabet-radio" checked="checked"/>
    <label for="A-C">A-C</label>
<input type="radio" id="D-H" name="alphabet-radio"/>
    <label for="D-H">D-H</label>
<input type="radio" id="I-M" name="alphabet-radio"/>
    <label for="I-M">I-M</label>
<input type="radio" id="N-R" name="alphabet-radio"/>
    <label for="N-R">N-R</label>
<input type="radio" id="S-Z" name="alphabet-radio"/>
    <label for="S-Z">S-Z</label>
</div>

JavaScript的：

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

$(function () {
    $("#alphabet-radio").buttonset().find('label').css('width', '19.4%');
});

document.getElementById("byState").addEventListener("click", function () {
    document.getElementById("A-C").checked = true;
    document.getElementById("D-H").checked = false;
    document.getElementById("I-M").checked = false;
    document.getElementById("N-R").checked = false;
    document.getElementById("S-Z").checked = false;
}, false);

document.getElementById("byCity").addEventListener("click", function () {
    document.getElementById("A-C").checked = true;
    document.getElementById("D-H").checked = false;
    document.getElementById("I-M").checked = false;
    document.getElementById("N-R").checked = false;
    document.getElementById("S-Z").checked = false;
}, false);

然而，当我在我的网站中使用这个确切的代码时，它不起作用（它保留了从组2中选择的先前选择的按钮）。我正在使用jquery-ui-1.10.1.custom.css，它可以很好地显示单选按钮，如下所示：jquery ui button。

任何线索为什么会影响它？当我从index.php中删除行<link rel="stylesheet" href="jquery-ui-1.10.1.custom.css" />时，它可以很好地工作。

Answer 1

一些问题：

button小部件的工作原理是响应单选按钮标签上的点击事件。这意味着您在单选按钮上侦听的click事件不会被触发，因为您实际上并未单击单选按钮本身，而是单击label。您可以使用change事件解决此问题。
手动更新单选按钮的选中状态后，您需要致电.buttonset('refresh')。
只需在组中的一个单选按钮上设置checked属性就足以使其余部分自动取消选中。您不需要在每个属性上设置checked属性。
您也应该将事件处理程序放在document.ready处理程序中。您也可以只使用一个而不是两个。

考虑到所有这些因素，我将做出以下修改：

$(function () {
    $("#sort-radio").buttonset();
    $("#alphabet-radio").buttonset().find('label').css('width', '19.4%');

    document.getElementById("byState").addEventListener("change", function () {
        document.getElementById("A-C").checked = true;
        $("#alphabet-radio").buttonset("refresh");
    }, false);

    document.getElementById("byCity").addEventListener("change", function () {
        document.getElementById("A-C").checked = true;
        $("#alphabet-radio").buttonset("refresh");
    }, false);
});

示例： http://jsfiddle.net/Fzq8L/2/

Answer 2

由于你正在使用jQuery，你可以通过在单选按钮中添加一个类来简化这一过程 - 其中只有一个可以“设置”SO听取那些变化事件。在开始时删除额外的功能，选择一个“阵列”按钮从第二组中单击。（因为只能选一个）

更简单的版本标记：

<div id="sort-radio">
    <input type="radio" class="picker" id="byState" name="sort-radio" checked='true'
    />
    <label for="byState">By State</label>
    <input type="radio" class="picker" id="byCity" name="sort-radio"
    />
    <label for="byCity">By City</label>
</div>
<div id="alphabet-radio" style="width:300px;">
    <input type="radio" class="secondgroup" id="A-C" name="alphabet-radio"
    checked='true' />
    <label for="A-C">A-C</label>
    <input type="radio" class="secondgroup" id="D-H" name="alphabet-radio"
    />
    <label for="D-H">D-H</label>
    <input type="radio" class="secondgroup" id="I-M" name="alphabet-radio"
    />
    <label for="I-M">I-M</label>
    <input type="radio" class="secondgroup" id="N-R" name="alphabet-radio"
    />
    <label for="N-R">N-R</label>
    <input type="radio" class="secondgroup" id="S-Z" name="alphabet-radio"
    />
    <label for="S-Z">S-Z</label>
</div>

代码：

$(document).ready(function () {
    $("#sort-radio").buttonset();
    $("#alphabet-radio").buttonset().find('label').css('width', '19.4%');
});
$(".picker").change(function () {
    $('.secondgroup').eq($('.picker').index(this)).prop("checked", true);
    $('#alphabet-radio').buttonset('refresh');
});

工作示例：http://jsfiddle.net/MarkSchultheiss/8x28x/2/

当第一组更改时，首先设置第二组，第一组为项目：

$(document).ready(function () {
    $("#sort-radio").buttonset();
    $("#alphabet-radio").buttonset().find('label').css('width', '19.4%');
});
$(".picker").change(function () {
    $('.secondgroup').eq(0).prop("checked", true);
    $("#alphabet-radio").buttonset("refresh");
});

小提琴：http://jsfiddle.net/MarkSchultheiss/8x28x/3/

Jquery-UI单选按钮

2 个答案: