使用javascript将值从一种形式传递到另一种形式

时间:2015-03-17 16:10:58

标签: javascript html css



<body>
<form style=" float:left" name="left">
<div style=" border:1px solid red; width:150px; padding:10px 10px 10px 10px">
<table width="100" border="0" cellspacing="3">
  <tr>
    <td><input type="text" placeholder="Name" id="cc1"/><br /></td>
  </tr>
  <tr>
    <td><input type="text" placeholder="Surname" id="cc2" /><br /></td>
  </tr>
  <tr>
    <td><input type="text" placeholder="Last name" id="cc3"/><br /></td>
  </tr>
  <tr>
    <td><input type="text" placeholder="ID"  id="cc4"/><br /></td>
  </tr>
</table>
</div>
<div style="margin-left:70px;">
<input type="checkbox" name="c" id="c1" /><br />
<input type="checkbox" name="c" id="c2"/><br />
<input type="checkbox"  name="c" id="c3"/><br />
<input type="checkbox"  name="c" id="c4"/><br />
</div>
</form>
<form style="float:left" name="mid">
</div>
<div style="margin-top:60px;">
<input type="button" value="<" name="ml" onClick="form()" />
<input type="button" value=">" name="mr" onClick="form()" />
</div>
</form>
<form style=" float:left" name="right">
<div style=" border:1px solid red; width:150px; padding:10px 10px 10px 10px">
<table width="100" border="0" cellspacing="3">
  <tr>
    <td><input type="text" placeholder="Name" id="dd1"/><br /></td>
  </tr>
  <tr>
    <td><input type="text" placeholder="Surname" id="dd2" /><br /></td>
  </tr>
  <tr>
    <td><input type="text" placeholder="Last name" id="dd3" /><br /></td>
  </tr>
  <tr>
    <td><input type="text" placeholder="ID" id="dd4"/><br /></td>
  </tr>
</table>

</div>
<div style="margin-left:70px;">
<input type="checkbox"  id="d1" /><br />
<input type="checkbox"  id="d2"/><br />
<input type="checkbox"   id="d3"/><br />
<input type="checkbox"   id="d4"/><br />
</div>
</form>
&#13;
&#13;
&#13;

因此,当选中完全复选框时,我需要使用更大和更小的符号从右向左和从左向右传递值。 示例:如果选中左侧的两个第一个复选框,并且您点击了更大的符号,则应将名称和姓氏传递给正确的表单。

1 个答案:

答案 0 :(得分:0)

这是您的工作jsfiddle

注意:我更改了函数名称,从form()到lefttoright()和righttoleft()

    var cc1 = document.getElementById("cc1");
var cc2 = document.getElementById("cc2");
var cc3 = document.getElementById("cc3");
var cc4 = document.getElementById("cc4");
var dd1 = document.getElementById("dd1");
var dd2 = document.getElementById("dd2");
var dd3 = document.getElementById("dd3");
var dd4 = document.getElementById("dd4");
function lefttoright(){
    var c1 = document.getElementById("c1").checked;
var c2 = document.getElementById("c2").checked;
var c3 = document.getElementById("c3").checked;
var c4 = document.getElementById("c4").checked;
    if(c1){dd1.value = cc1.value};
    if(c2){dd2.value = cc2.value};
    if(c3){dd3.value = cc3.value};
    if(c4){dd4.value = cc4.value};


};
function righttoleft(){
  var d1 = document.getElementById("d1").checked;
var d2 = document.getElementById("d2").checked;
var d3 = document.getElementById("d3").checked;
var d4 = document.getElementById("d4").checked;
    if(d1){cc1.value = dd1.value};
    if(d2){cc2.value = dd2.value};
    if(d3){cc3.value = dd3.value};
    if(d4){cc4.value = dd4.value};
};