画线时复选框未选中

Question

`我的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>

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

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);  

}

现在，当我从左侧选择两个复选框，从右侧选择两个复选框时，在绘制线条后都未选中它们，那么有人可以帮助我吗？其次，我还想在选中的复选框未选中时调用一个函数。

Answer 1

问题出在一行： 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];
  }

编辑：

更新的演示

检查代码中的if-else条件。 我已经为您解决了这个问题。