JQuery对话框单选按钮值在明确被选中后不保留

Posted 2023-05-08

【中文标题】JQuery对话框单选按钮值在明确被选中后不保留

【英文标题】：JQuery dialog box radio button value not staying after clearly being selected

【发布时间】：2017-07-28 12:24:07

【问题描述】：

我有一个简单的单选按钮来选择头发颜色。我决定使用 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-checked”类。为什么标签附带的“input”元素没有获得“checked”属性（即单选按钮被标记为被选中的“正常”方式）？

这是 jfiddle： https://jsfiddle.net/g1bbmptf/

【参考方案1】：

似乎关闭头发对话框时您无权访问所选选项。 thehair的值未定义，var thehair=$('input[name=hair]:checked').val();

因为您无权访问 $('input[name=hair]:checked')

您可以做的是全局创建头发变量并在您选择头发颜色时指定。

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

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

在onchange事件中设置头发的值

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