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”类。

但是，在测试中，我在一个更大的表单中尝试了这个单选按钮控件组对话框，该表单发布到另一个页面，我注意到头发颜色对话框中的选定选项没有正确传递。

所以我设置了一个小提琴（希望）帮助显示我的意思。我添加了一个警告来显示头发颜色单选按钮的当前值。

当你第一次运行它时，它应该是未定义的。
然后选择其中一个选项（比如“Blonde”），关闭对话框，然后选择再次运行它。
头发颜色单选按钮的值仍显示为“未定义”。为什么它不保留并显示“Blonde”？！？

在对话框中使用无线电控制组是否有问题，或者我是否只是设置不正确？（可能是后者）

有些相关的问题：我提到了检查过的HTML如何显示“label”元素获得“ui-checkboxradio-checked”类。为什么与标签一起使用的“input”元素没有得到“checked”属性（即“正常”方式单选按钮被标记为被检查）？

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

Answer 1

当关闭头发对话框时，您无法访问所选选项。 thehair的值是未定义的，var thehair = $（＆＃39; input [name = hair]：checked＆＃39;）。val（）;

因为您无法访问$（＆＃39;输入[name = hair]：已选中＆＃39;）

您可以做的是全局创建thehair变量，并在选择头发颜色时签名。

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

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

在onchange事件中设置thehair的值

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

明确选择后，JQuery对话框的单选按钮值不会停留

1 个答案: