Question

我创建了一个HTML生成器，我在表单中使用了复选框。

在生成的代码中，我将未选中的框作为''。

我在http://jsfiddle.net/Rqe6K/设置了当前代码，供您查看。

如何实现最终结果，以便只有选中的复选框值才能成为文本的一部分？

<button onclick="toggle('answer','1','','3','')">Click</button>应删除相应复选框的空白区域。

<form id="band" action="#">
  <label>Option 1: <input type="text" id="a1o1"><input type="checkbox" id="a1" class="can"></label><br>
  <label>Option 2: <input type="text" id="a1o2"><input type="checkbox" id="a2"  class="can"></label><br> 
  <label>Option 3: <input type="text" id="a1o3"> <input type="checkbox" id="a3"  class="can"></label><br> 
  <label>Option 4: <input type="text" id="a1o4"><input type="checkbox" id="a4"  class="can"></label><br> 
  <input type="submit"></input>
</form>
<p>Copy this:</p>
<textarea rows="20" cols="80" id="code"></textarea>

<script type="text/javascript">
  window.onload = function() {
    document.getElementById('band').onsubmit = function() {
      box1 = '';
      box2 = '';
      box3 = '';
      box4 = '';
      if (document.getElementById('a1').checked) { box1 = '1'; }
      if (document.getElementById('a2').checked) { box2 = '2'; }
      if (document.getElementById('a3').checked) { box3 = '3';  }
      if (document.getElementById('a4').checked) { box4 = '4'; }
      var text="<button onclick=\"toggle(\'answer\',\'"+box1+"'\,\'"+box2+"'\,\'"+box3+"'\,\'"+box4+"'\)\">Click</button>";
      document.getElementById('code').value=text;
      return false;
    }
  }
</script>

Answer 1

如果你输入一个名为a1o1的ID但是尝试使用a1找到它，那么浏览器永远找不到该控件是正常的。

<强>更新

不是很酷，但有效......

http://jsfiddle.net/A6f9r/

<强> UPDATE2

http://jsfiddle.net/v7rfN/

Answer 2

首先声明变量而不是将其变为全局变量。即var box1='';

使用此逻辑 -

var text="<button onclick=\"toggle(\'answer\',\'";
    if(box1!='')
    {
        text+=box1+"'\,\'";
    }
    if(box2!='')
    {
        text+=box2+"'\,\'";
    }
    if(box3!='')
    {
        text+=box3+"'\,\'";
    }
    if(box4!='')
    {
        text+=box4+"'\)\'";
    }
   text = text.substring(0, text.length - 2);
    text+=")\">Click</button>";

请参阅小提琴 - http://jsfiddle.net/Rqe6K/2/

Answer 3

如果你可以使用jQuery我热烈地建议它，因为它的语法简洁：

$("#sendAnswer").click(function(){
    var answers = $("input[name='answer[]']").map(function(){if(this.checked){return this.id;}}).get();
    var text = "<button onclick=\"toggle(\'answer\'," + serializeInputValues(answers) + ")\">Click</button>";
    $('#code').val(text);
    return false;
})

function serializeInputValues(fields){ 
    var sStr = "";
    jQuery.each(fields, function(i, field){
        sStr += "'" + field + "', ";
    });

    return sStr.slice(0, -2);
}

试试这个fiddle。

编辑：使用这种方法，您的答案可能会增加，而且您的代码仍然保持不变，使用您的方法，您必须为每个新复选框添加if，以提升您的潜力组合爆炸。

从JS中的最终代码中删除未选中的复选框

3 个答案: