离线表单复选框列表

时间:2017-11-12 23:00:03

标签: html forms checkbox offline

我有一个包含6个选项的表单,可以在没有Internet访问权限的驱动器上脱机运行。当用户单击复选框时,它会在textarea中放置一个标题,对于其他选项也是如此。如果未选中复选框,则会从textarea中删除标题。用户在标题下手动添加更多详细信息,点击复制&重置将其复制到剪贴板。它被粘贴在其他地方。

问题 - 选中或取消选中复选框后,它会重置所有其他仅添加标题的自由文本。我不希望这会影响其他数据,只有在未选中该选项时才删除特定标题。

我也希望textarea中的最后一个标题也有几个换行符。帮助赞赏。

JAVASCRIPT

  $(function() {
  $('input[name=activeOptions]').on('change', function() {
    var arr = $('input[name=activeOptions]:checked').map(function () {
        return this.value;
    }).get();
    $('#Options').val(arr.join("\n\n\n.\n"));
  });
});

HTML

<script type="text/javascript" src="../dis/jquery.min.js"></script>
<script type="text/javascript" src="../dis/checkboxoptions.js"></script>

<SCRIPT LANGUAGE="JavaScript">
window.clipboardData.setData('text',
                          document.getElementById('Options').value                    
                         );

function ClipBoard1() 
{
    //create a new element, otherwise setting of range.text 
    //will change the form-fields values
    var dummy=document.createElement('textarea');

    //the range
   Copied = dummy.createTextRange();

   //set the text
   Copied.text = ".\n" +
                 "\+\+\+\+\+ CHECKS \+\+\+\+\+" +
                 "\n.\n" +
                 document.getElementById('Options').value + "\n\n" 
                 ;

   //expand the range to contain all contents
   Copied.expand('textedit');

   //Copy
   Copied.execCommand("Copy");
}
</SCRIPT>

</HEAD>

<body class="body">

<P>
<FORM name="Checks">

<div class="title">++++ CHECKS ++++</div>
<div class="main">
<div class="divTable">
    <div class="divTableBody">
        <div class="divTableRow">
                <div class="divTableCell"><input type="checkbox" name="activeOptions" value='--Option 1--'>Option 1</div>
                <div class="divTableCell"><input type="checkbox" name="activeOptions" value='--Option 3--'>Option 3</div>
                <div class="divTableCell"><input type="checkbox" name="activeOptions" value='--Option 5--'>Option 5</div>
        </div>
        <div class="divTableRow">
                <div class="divTableCell"><input type="checkbox" name="activeOptions" value='--Option 2--'>Option 2</div>
                <div class="divTableCell"><input type="checkbox" name="activeOptions" value='--Option 4--'>Option 4</div>
                <div class="divTableCell"><input type="checkbox" name="activeOptions" value='--Option 6--'>Option 6</div>
        </div>
    </div>
</div>
<p>
<TEXTAREA NAME="Options" ID="Options" rows="15" cols="55"></TEXTAREA>
<p align=center>
<BUTTON onClick="ClipBoard1();" class="copyreset">Copy & Reset</BUTTON>
<INPUT class="reset" type=reset value=Reset>
<p>
</DIV>
</FORM>
</BODY>
</HTML>

0 个答案:

没有答案