选中复选框并在文本框中发布值时如何显示带有单选按钮的jquery对话框

Question

我有 41 个这样的复选框

HTML

<input id="1" type="checkbox" onclick="updatebox()" />
<input id="2" type="checkbox" onclick="updatebox()" />
<input id="3" type="checkbox" onclick="updatebox()" />
<input id="4" type="checkbox" onclick="updatebox()" />

Javascript

<script type="text/javascript">
function updatebox()
{
    var textbox = document.getElementById("list");
    var values = [];
 if(document.getElementById('1').checked) {values.push("1");}
 if(document.getElementById('2').checked) {values.push("2");}
 if(document.getElementById('3').checked) {values.push("3");}
 if(document.getElementById('4').checked) {values.push("4");}

    textbox.value = values.join(", ");

}
</script>

选中复选框时，值将发布在文本框中， 现在我想要的是当用户单击复选框时弹出 jquery 对话框，并且用户将有两个带有男性或女性选项的单选按钮以及 ok 按钮，因此当用户单击 ok 时，值应根据选择发布在文本框上M代表男性F代表女性以及1M或1F，2M或2F等数字。

P.S 用户可以选择多个复选框。

谢谢！

Answer 1

这里有你想要的东西。 HTML：

<body>
  <form id="form">
    <input id="1" type="checkbox" /> 1
    <input id="2" type="checkbox" /> 2
    <input id="3" type="checkbox" /> 3
    <input id="4" type="checkbox" /> 4
    ...
    <input id="10" type="checkbox" /> 10
    ...
    <input id="41" type="checkbox" /> 41
    <input id="list" />
  </form>
  <div id="prompt" style="display:none;" title="Gender">
    <form>
      <input type="radio" name="gender" id="radio" value="male" />
      <label for="radio">Male</label>
      <input type="radio" name="gender" id="radio2" value="female" />
      <label for="radio2">Female</label>
    </form>
  </div>
</body>

JavaScript：

$(function() {
   var form = document.getElementById("form");
   var textbox = document.getElementById("list");
   var $prompt = $("#prompt");

   // We record what is currently checked, and the user's answers in this `pairs` object. 
   var pairs = [];

   // Listen to `change` events.
   $("input[type='checkbox']", form).on('change', function (ev) {
     var check = ev.target;

     if (check.checked) {
       // Checked, so prompt and record.
       $prompt.dialog({
         modal: true,
         buttons: {
          "Ok": function() {
             var gender = $prompt.find("input[name='gender']:checked")[0];
             var letter = {"male":"M", "female":"F"}[gender.value];

             pairs[check.id] = '' + check.id + letter;
             $( this ).dialog( "close" );
             refresh();
           }
         }
       });
     }
     else {
       // Unchecked, so forget it.
       delete pairs[check.id];
       refresh();
     }

     function refresh() {
       // Generate what we must now display in the textbox and refresh it.

       // We walk the list.
       var keys = Object.keys(pairs);
       var values = [];
       for (var i = 0, key; (key = keys[i]); ++i) {
         values.push(pairs[key]);
       }
       textbox.value = values.join(", ");
     }
   }); 
});

这是带有上述代码的jsbin。

要点：

1. 此代码使用 JavaScript 添加事件处理程序，而不是在 HTML 中使用 onclick。不建议直接在 HTML 中关联处理程序。

2. 它侦听change 事件而不是click。某些点击有时不会导致输入元素发生变化。

3. 它使用$.dialog 提示用户输入M、F。

4. refresh 函数用于重新计算文本字段。

5. 它会记录当前检查的内容，而不是在其中一个更改时重新查询所有复选框。

Answer 2

function updatebox()
{
    var textbox = document.getElementById("list");
    var values = [];
    for (var i = 1; i <= 41; ++i) {
        var id = '' + i;
        if (document.getElementById(id).checked) {
            var gender = prompt('Male (M) or female (F)?');
            values.push(gender + id);
        }
    }

    textbox.value = values.join(", ");
}

需要注意的几点：

• 我只需使用从 1 到 41 的 for 循环，就摆脱了所有重复的代码。

• 我还修复了您那里的奇怪缩进。

• 您可能希望使用除prompt 之外的其他方法来获取用户输入，但它的工作方式相同。

• （如果您要继续使用prompt，您可能还需要添加输入验证，以确保用户没有输入除M 或F 以外的其他内容。）