复选框检查javascript中的yes命令

Question

我想完成，当我尝试选中复选框时，它会显示弹出窗口。然后，有“是”和“否”两个选项。当我单击“是”复选框时，将选中并关闭弹出窗口。如果我选择“否”复选框将取消选中并关闭弹出窗口。给我一个帮助。示例代码在这里

Javascript

$(document).ready(function () {
$('#chkBox').click(function () {
    if ($(this).is(':checked')) {
        $("#txt").dialog({
            close: function () {
                $('#chkBox').prop('checked', false);
            }
        });
    } else {
        $("#txt").dialog('close');
    }
});
});

HTML

<input type="checkbox" id="chkBox" name="HelpCheckbox" value="Help" />
  <div id="txt" style="display: none;">
       <button>Yes</button>
        <button>NO</button>
  </div>

现场示例：http : //jsfiddle.net/5vy1m233/37/

请帮忙。谢谢你。

Answer 1

尝试添加一个buttons:{}对象属性，而不是在标记中添加两个额外的按钮。此设置将为您创建按钮，您可以在这些按钮中选择选中/取消选中复选框：

$(document).ready(function() {
  $('#chkBox').click(function() {
    var $chkBox = $('#chkBox'),
        $txt = $('#txt');
    $txt.dialog({
      buttons: {
        Yes: function() {
          $chkBox.prop('checked', true); // check if Yes
          $txt.dialog('close'); // and close the popup
        },
        No: function() {
          $chkBox.prop('checked', false); // uncheck if No
          $txt.dialog('close'); // and close the popup
        }
      }
    });
  });
});

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="checkbox" id="chkBox" name="HelpCheckbox" value="Help" />
<div id="txt" style="display: none;">
</div>