jQueryのダイアログボックスのラジオボタンの値は明らかに

Question

を選択された後、私は髪の色を選択するための簡単なラジオボタンを持って滞在していません。私は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」を取得します。

はしかし、テストでは、私は別のページに投稿し、私は髪の色ダイアログで選択したオプションが正しく渡しれなかったことに気づいたことを大きなフォーム内でこのラジオボタンコントロールグループのダイアログを試してみました。

だから私は、セットアップフィドルは（たぶん）私が何を意味するかを示して支援します。ヘアカラーのラジオボタンの現在の値を表示するためのアラートを追加しました。

• 最初に実行したときには、それは未定義です。

• オプションの1つ（「ブロンド」）を選択してダイアログを閉じ、 をもう一度実行します。

• ヘアカラーラジオボタンの値は、依然としてとして示し、「未定義。 を、なぜそれが保持し、表示されません 『

は、無線制御グループを使用して問題はありませんか？！？』ブロンド（おそらく後者）

多少の関連する質問： "label"要素が "ui-checkboxradio-checked"のクラスを取得したことを検査HTMLがどのように示しているかを述べましたmsgstr "" "ラベルと一緒に" input "要素が" checked "属性を取得しないのはなぜですか？ラジオボタンはチェックされているとマークされています）？ここで

はjfiddleです： https://jsfiddle.net/g1bbmptf/

Answer 1

ヘアダイアログ近いが、あなたが選択したオプションへのアクセスを持っていないとき、それはそうです。 thehairの値は未定義です。var thehair = $（ 'input [name = hair]：checked'）。

あなたは$（「入力[名前=毛]：チェックする」）にaccesssを持っていけないので、あなたが何ができるか

グローバルthehair変数を作成し、髪の色を選択したときasignedです。

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

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

はのonchangeイベントにthehairの値を設定

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