0

我正在使用两组单选按钮

第一组：

  • 状态
  • 城市

第 2 组：

  • 交流电
  • DH
  • 我是
  • NR
  • 深圳

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

我让它在这个小提琴中工作在这里小提琴

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。

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

4

2 回答 2

2

几个问题：

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

于 2013-03-12T23:05:49.327 回答
0

由于您使用的是 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/

于 2013-03-12T23:37:53.180 回答