Jquery-UI 单选按钮

Question

我正在使用两组单选按钮

第一组：

• 状态
• 城市

第 2 组：

• A-C
• D-H
• 我-我
• 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

几个问题：

1. button 小部件通过响应单选按钮标签上的点击事件来工作。这意味着您在单选按钮本身上收听的click 事件不会被触发，因为您实际上并没有单击单选按钮本身，而是它们的labels。您可以使用change 事件解决此问题。

2. 您需要在手动更新单选按钮的选中状态后调用.buttonset('refresh')。

3. 只需在组中的一个单选按钮上设置checked 属性就足以使其余的自动取消选中。您不需要为每一个都设置checked 属性。

4. 您也应该将事件处理程序放在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，因此您可以通过向单选按钮添加一个类来大大简化这一过程——其中只有一个可以“设置”，因此请在这些单选按钮上监听更改事件。在开始时删除额外的功能，从第二组中选择要单击的“阵列”按钮之一。 （因为只能选择一个）

更简单的版本标记：

<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/