JQuery對話框單選按鈕值未被選中明確選擇

我有一個簡單的單選按鈕來選擇頭髮顏色。我決定使用Jquery並將它變成一個「控制組」，這樣我就可以使它看起來比只是一個普通的單選按鈕列表更好看。JQuery對話框單選按鈕值未被選中明確選擇

<div id='hair-hunch-click' class='hunch-click'>Hair Color 
        <div id='hair-dialog' class='hunch-dialog'> 
        <div id='haircolor'> 
        <div id='haircolor-boxes'> 
        <input type='radio' id='bald' class='inputfield' name='hair' value='Bald' /> 
        <label for='bald' class='hair-bald'>Bald<br/></label> 
        <input type='radio' id='black' class='inputfield' name='hair' value='Black' /> 
        <label for='black' class='hair-black'>Black<br/></label> 
        <input type='radio' id='blonde' class='inputfield' name='hair' value='Blonde' /> 
        <label for='blonde' class='hair-blonde'>Blonde<br/></label> 
        <input type='radio' id='hair-brown' class='inputfield' name='hair' value='Brown' /> 
        <label for='hair-brown' class='hair-brown'>Brown<br/></label> 
        <input type='radio' id='red' class='inputfield' name='hair' value='Red' /> 
        <label for='red' class='hair-red'>Red<br/></label> 
        </div> 
        </div> 
        </div> 
        </div> 



    $(function() { 
     $("#haircolor").controlgroup(); 
    });

我得到了那個工作。然後我決定我希望單選按鈕控件組在彈出的jQuery「對話框」中。

$(function() { 
     $(".hunch-dialog").dialog({ 
     autoOpen: false, 
     resizable: false, 
     modal: true, 
     show: { 
      effect: "blind", 
      duration: 500 
     }, 
     hide: { 
      effect: "explode", 
      duration: 100 
     }, 
     open: function(){ 
       jQuery('.ui-widget-overlay').bind('click',function(){ 
        jQuery('.hunch-dialog').dialog('close'); 
       }) 
      } 
     }); 

    $("#hair-hunch-click").on("click", function() { 
    var thehair=$('input[name=hair]:checked').val(); 
    alert(thehair); 
     $("#hair-dialog").dialog("open"); 
     }); 
    });

工作正常。您選擇「紅色」，然後在HTML中（檢查時），紅色選項的「標籤」獲得類「ui-checkboxradio-checked」。

然而，在測試中，我嘗試了較大的表單中單選按鈕組對話框的職位到另一個頁面，我注意到，在頭髮的顏色對話框中選擇的選項沒有經過正常。

所以我設置一個小提琴（希望）的幫助說明我的意思。我添加了一個警報來顯示頭髮顏色單選按鈕的當前值。

當你第一次運行它時，它是未定義的，因爲它應該是。
然後選擇其中一個選項（比如說「金髮女郎」），關閉對話框，然後再運行一次。
頭髮的顏色單選按鈕的值仍顯示爲「未定義。爲何不保留並顯示‘金髮’？！？

是否有與在使用無線電對照組有問題一個對話框，還是我只是有一些設置不正確（可能是後者）

有些關聯方的問題：我提到的檢查HTML如何顯示「標籤」元素獲得一類的「UI-checkboxradio覈對「爲什麼標籤中的」input「元素沒有得到」checked「屬性（即」正常「的方式單選按鈕被標記爲正在檢查）？

這裏的jfiddle： https://jsfiddle.net/g1bbmptf/

來源

2017-03-08 user3304303

看來當頭發對話框關閉不訪問所選選項。 thehair的值是未定義的，var thehair = $（'input [name = hair]：checked'）。val（）;

，因爲你沒有accesss爲$（「輸入[名稱=發]：勾選」）

你可以做的是全球範圍內創建thehair變量，當您選擇的髮色asigned。

$(function() { 
    var thehair = '' 
}); 

$("#hair-hunch-click").on("click", function() { 
    alert(thehair); 
    $("#hair-dialog").dialog("open"); 
});

設置thehair的值在onchange事件

thehair=$('input[name=hair]:checked').val();

來源

2017-03-08 04:49:38

JQuery對話框單選按鈕值未被選中明確選擇

回答

相關問題