Jquery-UI单选按钮

Question

我正在使用两组单选按钮。

第1组：

• 状态
• 城市

第2组：

• A-C
• D-H
• I-M
• N-R
• S-Z

当我在州和市之间切换时，我希望将组2中的are设置为checked，而将其他部分设置为未选中。

我让它在这把小提琴里工作，小提琴

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 1.10.1.custom.css，它很好地显示单选按钮，如下所示：jquery按钮。

知道这会影响到什么吗？当我从我的<link rel="stylesheet" href="jquery-ui-1.10.1.custom.css" />中删除行index.php时，它工作得很好。

Answer 1

几个问题：

1. button小部件通过响应单选按钮标签上的单击事件来工作。这意味着您在单选按钮上侦听的click事件不会被触发，因为您实际上不是在单击单选按钮本身，而是单击它们的label。您可以通过使用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/

将第二组设置为后一组，当第一组中的任何一组被更改时，首先设置为item：

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