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>

我实现了在复选框之间绘制线条的功能，这些复选框像我们在匹配时一样被检查。以下函数在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);

}

现在当我选择左边一个和右边一个两个复选框时，两个复选框在绘制线后都会被取消选中，有人可以帮助我，其次我也想在选中复选框时调用一个函数未选中状态。

Answer 1

问题在于：document.body.innerHTML += htmlLine;

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

Here's a demo for you

而且，这是诀窍的代码：

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];
  }

修改

Updated Demo

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

绘制线条时取消选中复选框

1 个答案: