jQuery的UI單選按鈕

Question

我使用兩組無線電按鈕

組1：

• 國家
• 市

組2：

• AC
• d-H
• 我-M
• N-R
• S-Z

當我州和城市之間切換，我想A-C從第2組，而其他被設置成未選中狀態被設置爲檢查。

我有它在此琴在這裏工作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事件不會被解僱，因爲您實際上並未單擊單選按鈕本身，而是他們的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/

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/