Javascript 当绘制线时，复选框未选中

`我的html代码中几乎没有复选框

<div id="innerContainer">
    <div style="height:auto;float:left;width:auto;">
        <input type="text"  id="wordone" value="plane" checked="unchecked" readonly/>
        <input type="checkbox" id="one" onclick="testIt();" />
    </div>
    <div style="height:auto;float:left;width:auto;margin-left:80px;">
        <input type="checkbox"  id="mOne" onclick="testIt();" />
        <input style="width:400px;" type="text" id="meanmOne" value="state of tranquility,security and harmony" readonly/>
    </div>

</div>

<div id="innerContainer">
    <div style="height:auto;float:left;width:auto;">
        <input type="text" id="wordtwo" value="piece" readonly/>
        <input type="checkbox"  id="two" onclick="testIt();"/>
    </div>
    <div style="height:auto;float:left;width:auto;margin-left:80px;">
        <input type="checkbox" id="mTwo" onclick="testIt();"/>
        <input style="width:400px;" type="text"  id="meanmTwo" value="a fraction or part of a whole" readonly/>
    </div>

</div>

<div id="innerContainer">
    <div style="height:auto;float:left;width:auto;">
        <input type="text"  id="wordthree" value="passed" readonly/>
        <input type="checkbox" id="three" onclick="testIt();"/>
    </div>
    <div style="height:auto;float:left;width:auto;margin-left:80px;">
        <input type="checkbox" id="mThree" onclick="testIt();"/>
        <input style="width:400px;" type="text" id="meanmThree" value="a medieval soldier" readonly/>
    </div>

</div>

<div id="innerContainer">
    <div style="height:auto;float:left;width:auto;">
        <input type="text" id="wordfour" value="peace" readonly/>
        <input type="checkbox" id="four" onclick="testIt();"/>
    </div>
    <div style="height:auto;float:left;width:auto;margin-left:80px;">
        <input type="checkbox" id="mFour" onclick="testIt();"/>
        <input style="width:400px;" type="text"  id="meanmFour" value="not fancy or beautiful" readonly/>
    </div>
</div>

我已经实现了在复选框之间画线的功能，就像我们在匹配中所做的那样。以下函数在javascripts中实现

function connect(div1, div2, color, thickness) {
var off1 = getOffset(div1);
var off2 = getOffset(div2);
// bottom right
var x1 = off1.left + off1.width - 1;
var y1 = off1.top + off1.height - 5;
// top right
var x2 = off2.left;
var y2 = off2.top + 5;
// distance
var length = Math.sqrt(((x2-x1) * (x2-x1)) + ((y2-y1) * (y2-y1)));
// center
var cx = ((x1 + x2) / 2) - (length / 2);
var cy = ((y1 + y2) / 2) - (thickness / 2);
// angle
var angle = Math.atan2((y1-y2),(x1-x2))*(180/Math.PI);
// make hr
var htmlLine = "<div style='border-radius:5px;padding:0px; margin:0px; height:"        +       thickness + "px; background-color:" + color + "; line-height:1px;   position:absolute; left:" + cx + "px; top:" + cy + "px; width:" + length + "px; -moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); transform:rotate(" + angle + "deg);' />";
//
//alert(htmlLine);

document.body.innerHTML += htmlLine; 
}

function getOffset( el ) {
var _x = 0;
var _y = 0;
var _w = el.offsetWidth|0;
var _h = el.offsetHeight|0;
while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
    _x += el.offsetLeft - el.scrollLeft;
    _y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
    }
return { top: _y, left: _x, width: _w, height: _h };
    }



window.testIt = function() {
var div1;
var div2;

if(document.getElementById('one').checked)
    {div1 = document.getElementById('one');}
else if(document.getElementById('two').checked)
    {div1 = document.getElementById('two');}
else if(document.getElementById('three').checked)
    {div1 = document.getElementById('three');}
else if(document.getElementById('four').checked)
    {div1 = document.getElementById('four');}
else if(document.getElementById('five').checked)
    {div1 = document.getElementById('five');}
else if(document.getElementById('six').checked)
    {div1 = document.getElementById('six');}
else if(document.getElementById('seven').checked)
    {div1 = document.getElementById('seven');}
else if(document.getElementById('eight').checked)
    {div1 = document.getElementById('eight');}
else if(document.getElementById('nine').checked)
    {div1 = document.getElementById('nine');}
else if(document.getElementById('ten').checked)
    {div1 = document.getElementById('ten');}


if(document.getElementById('mOne').checked)
    {div2 = document.getElementById('mOne');}   
else if(document.getElementById('mTwo').checked)
    {div2 = document.getElementById('mTwo');}
else if(document.getElementById('mThree').checked)
    {div2 = document.getElementById('mThree');}
else if(document.getElementById('mFour').checked)
    {div2 = document.getElementById('mFour');}
else if(document.getElementById('mFive').checked)
    {div2 = document.getElementById('mFive');}
else if(document.getElementById('mSix').checked)
    {div2 = document.getElementById('mSix');}
else if(document.getElementById('mSeven').checked)
    {div2 = document.getElementById('mSeven');}
else if(document.getElementById('mEight').checked)
    {div2 = document.getElementById('mEight');}
else if(document.getElementById('mNine').checked)
    {div2 = document.getElementById('mNine');}
else if(document.getElementById('mTen').checked)
    {div2 = document.getElementById('mTen');}

connect(div1, div2, "#000000", 2);  

功能连接（div1、div2、颜色、厚度）{
var off1=getOffset（第1部分）；
var off2=getOffset（第2部分）；
//右下角
变量x1=off1.left+off1.width-1；
变量y1=off1.top+off1.height-5；
//右上角
var x2=关闭2.5秒左；
变量y2=off2.top+5；
//距离
变量长度=数学sqrt（（x2-x1）*（x2-x1））+（（y2-y1）*（y2-y1））；
//居中
变量cx=（（x1+x2）/2）-（长度/2）；
var-cy=（（y1+y2）/2）-（厚度/2）；
//角度
变量角度=数学atan2（（y1-y2），（x1-x2））*（180/数学PI）；
//制造人力资源
var htmline=“”；
//
//警报（HTMLINE）；
document.body.innerHTML+=htmlLine；
}
函数getOffset（el）{
var x=0；
var _y=0；
var _w=el.offsetWidth | 0；
var | h=el.offsetHeight | 0；
而（el&&！isNaN（el.offsetLeft）和&！isNaN（el.offsetTop））{
_x+=el.offsetLeft-el.scrollLeft；
_y+=el.offsetTop-el.scrollTop；
el=el.offsetParent；
}
返回{top:_y，left:_x，width:_w，height:_h}；
}
window.testIt=函数（）{
var-div1；
var-div2；
if（document.getElementById（'one'）。选中）
{div1=document.getElementById（'one'）；}
else if（document.getElementById（'two'）。选中）
{div1=document.getElementById（'two'）；}
else if（document.getElementById（'three'）。选中）
{div1=document.getElementById（'three'）；}
else if（document.getElementById（'four'）。选中）
{div1=document.getElementById（'four'）；}
else if（document.getElementById（'five'）。选中）
{div1=document.getElementById（'five'）；}
else if（document.getElementById（'six'）。选中）
{div1=document.getElementById（'six'）；}
else if（document.getElementById（'seven'）。选中）
{div1=document.getElementById（'seven'）；}
else if（document.getElementById（'8'）。选中）
{div1=document.getElementById（'eight'）；}
else if（document.getElementById（'nine'）。选中）
{div1=document.getElementById（'nine'）；}
else if（document.getElementById（'ten'）。选中）
{div1=document.getElementById（'ten'）；}
if（document.getElementById（'mOne'）。选中）
{div2=document.getElementById（'mOne'）；}
else if（document.getElementById（'mTwo'）。选中）
{div2=document.getElementById（'mTwo'）；}
else if（document.getElementById（'mThree'）。选中）
{div2=document.getElementById（'mThree'）；}
else if（document.getElementById（'mFour'）。选中）
{div2=document.getElementById（'mFour'）；}
else if（document.getElementById（'mFive'）。选中）
{div2=document.getElementById（'mFive'）；}
else if（document.getElementById（'mSix'）。选中）
{div2=document.getElementById（'mSix'）；}
else if（document.getElementById（'mSeven'）。选中）
{div2=document.getElementById（'mSeven'）；}
else if（document.getElementById（'mEight'）。选中）
{div2=document.getElementById（'mEight'）；}
else if（document.getElementById（'mNine'）。选中）
{div2=document.getElementById（'mNine'）；}
else if（document.getElementById（'mTen'）。选中）
{div2=document.getElementById（'mTen'）；}
连接（第1部分，第2部分，#000000），第2部分）；

}

---

现在，当我选中两个复选框时，一个从左，一个从右，它们在画线后都会被取消选中，有人能帮我吗？其次，我想在取消选中复选框时调用一个函数。

问题在于这行：

document.body.innerHTML+=htmlLine

在此行中，删除并再次添加文档正文中的标记。这会导致复选框丢失其各自的
checked
状态。为了处理这个问题，您需要在更新DOM之前保存状态&然后将它们重新应用到每个复选框


下面是实现这一技巧的代码：

cb = [], states = [];
  var checkboxes = document.getElementsByTagName('input');
  for (var i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i].type === 'checkbox') {
          cb.push(checkboxes[i].id);
          states.push(checkboxes[i].checked);
      }
  }

document.body.innerHTML += htmlLine;


var checkboxes = document.getElementsByTagName('input');
  for (var i = 0; i < cb.length; i++) {
      document.getElementById(cb[i]).checked = states[i];
  }

cb=[]，states=[]；
var复选框=document.getElementsByTagName（'input'）；
对于（变量i=0；i

编辑：


检查代码中的if-else条件。我已经为您解决了这个问题。
但是有一个问题，没有为其他复选框画线正在画线。现在复选框保留选中状态的问题是，代码总是将前两个选中的复选框发送到
connect
函数&在现有的复选框上有一个相同的行被透支。您需要找出最后两个选中的复选框，并相应地调用
connect
方法。修复带有大量
if else
条件的部件。我在连接函数div1=null和div2=null中添加了这两行，并从连接函数中删除了您的修改，然后它就可以正常工作了。如果我将您的代码添加到它中，它只接受自您删除我的代码以来的第一个复选框，清除所有复选框的错误又回来了，因此您的if-else条件开始工作。这是因为您只选中了前两个复选框。如果每次都清除所有复选框，那么很明显，画线的代码将起作用。但是，我的代码保留复选框的选中状态，因此您的代码失败。我无法进一步解释。我已经用更新的演示链接更新了我的答案。它正在按预期工作。查看
if-else
条件，尝试了解发生了什么