如何设置/重置对话框单选按钮组

我尝试编写一些脚本，在调用对话框之前可以设置一些参数。只有一个按钮、确定和单选按钮组。我计划在通话前更改对话框的标题，并自由（语法上）设置选中哪个单选按钮。第一次调用，加载脚本后，显示未选中单选按钮的对话框，但是如果我选中其中任何一个，然后重复调用（例如，按按钮调用），则会出现带有先前选择的单选按钮的对话框，但返回的值为"未定义"。我需要这个：

我希望在调用打开它之前以编程方式设置选中对话框中的任何单选按钮
我希望能够重置单选按钮（未选中任何按钮），如果之前检查了其中任何一个

我

尝试了一些我在这里和那里找到的解决方案，但没有分数。

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="//resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
 $( "#dialog-oc" ).dialog({
      modal: true,
      width: 520,
      resizable:false,
      autoOpen: false,
      buttons: {
        Ok: function() {
          var odg=$('input[name="radiooc"]:checked', '#dialog-oc').val();
           $('#dialog-oc input:radio:checked').each(function () {
              $(this).attr('checked', false);
            });
          $("#dialog-oc").dialog("close"); //close dialog
          alert('Answer is '+odg);
        }
      }
    });
});
//open dialog
$("#dialog-oc" ).dialog( "open" );
$('#dialog-oc input:radio').prop('checked', false); //reset radiobuttons
$(".second").attr('checked', false); //reset by using class
//change title of dialog, this works OK:
$("#dialog-oc").dialog("option", "title", "New title");
$( function() {
    $( "input" ).checkboxradio();
    $( "fieldset" ).controlgroup();
});
</script>
<body>
<div class="widget" id="dialog-oc" title="Pick a one">
    <fieldset>
    <legend>Pick quantity: </legend>
    <label for="radio-1">1</label>
    <input type="radio" name="radiooc" id="radio-1" class="second" value="1">
    <label for="radio-2">2</label>
    <input type="radio" name="radiooc" id="radio-2" class="second" value="2">
    <label for="radio-3">3</label>
    <input type="radio" name="radiooc" id="radio-3" class="second" value="3">
  </fieldset>
</div>
</body>

我认为这可能会有所帮助;不确定。

工作示例：https://jsfiddle.net/Twisty/t0a7uabq/

.HTML

<button id="sel-btn">Select</button>
<div id="dialog-oc" title="Pick a one">
  <fieldset>
    <legend>Pick quantity: </legend>
    <label for="radio-1">1</label>
    <input type="radio" name="radiooc" id="radio-1" class="second" value="1">
    <label for="radio-2">2</label>
    <input type="radio" name="radiooc" id="radio-2" class="second" value="2">
    <label for="radio-3">3</label>
    <input type="radio" name="radiooc" id="radio-3" class="second" value="3">
  </fieldset>
</div>

JavaScript

$(function() {
  $("#dialog-oc").dialog({
    modal: true,
    width: 520,
    resizable: false,
    autoOpen: false,
    buttons: {
      Ok: function() {
        var odg = $('#dialog-oc input:checked').val();
        $("#sel-btn").data("sel", $('#dialog-oc input:checked').attr("id"));
        $('#dialog-oc input:radio').each(function() {
          $(this).prop('checked', false);
        });
        $("#dialog-oc").dialog("close"); //close dialog
      }
    },
    open: function(e, ui) {
      if ($('#sel-btn').data("sel") !== null) {
        var mySel = $('#sel-btn').data("sel");
        $("#" + mySel).prop("checked", true);
      }
    }
  });
  //open dialog
  $("#dialog-oc").dialog("open");
  $("#sel-btn").click(function() {
    $("#dialog-oc").dialog("open");
  })
  $('#dialog-oc input:radio').prop('checked', false); //reset radiobuttons
  $(".second").attr('checked', false); //reset by using class
  //change title of dialog, this works OK:
  $("#dialog-oc").dialog("option", "title", "New title");
  $("input").checkboxradio();
  $("fieldset").controlgroup();
});

您可以使用open回调来执行可以将单选按钮设置为 checked 的代码。我利用.data()功能在对话框关闭时存储选定的 id。这样，同一元素在打开时设置为选中。

相关内容

最新更新

热门标签：