更改复选框选中的值（循环不工作）

-2

我试图做一个JavaScript代码，如果选中相应的复选框，它将从一个输入字段获取值，并使用它改变所有其他具有相同类的输入。的JavaScript是在底部，但仍然得到所有3个按钮：更改复选框选中的值（循环不工作）

遗漏的类型错误：在change_numbr

任何意见无法读取空的特性“价值”？

代码：

<form> 
    <fieldset> 
      <label for="check1">Check</label> 
      <input id="check1" type="checkbox" class="chkbox">   
      <label for="number1">Number</label> 
      <input id="number1" type="text" class="numbr" value="324"> 
      <button type="button" onClick="change_numbr('numbr1')">click</button> 
    </fieldset> 
    <fieldset> 
      <label for="check2">Check</label> 
      <input id="check2" type="checkbox" class="chkbox">   
      <label for="number2">Number</label> 
      <input id="number2" type="text" class="numbr" value="85"> 
      <button type="button" onClick="change_numbr('numbr2')">click</button> 
    </fieldset> 
    <fieldset> 
      <label for="check3">Check</label> 
      <input id="check3" type="checkbox" class="chkbox">   
      <label for="number3">Number</label> 
      <input id="number3" type="text" class="numbr" value="3"> 
      <button type="button" onClick="change_numbr('numbr3')">click</button> 
    </fieldset> 
</form>

代码：

<script type="text/javascript"> 
function change_numbr(selected_numbr) { 
    var value_numbr = document.getElementById(selected_numbr).value; 
    var total_numbr = document.getElementsByClassName("numbr"); 
    var i; 
    for (i = 0; i < total_numbr.length; i++) { 
    if (document.getElementById(check[i]).checked) { 
     document.getElementById(number[i]).value = value_numbr; 

     } 
    } 
} 
</script>

来源

2017-03-04 Leon Sweeting

你将值传递给你的函数，比如'numbr1'，'numbr2'和'numbr3'，但没有你的元素有那些一个ID。但是，您确实拥有ID为“number1”，“number2”和“number3”的元素 – j08691

我觉得这是你找什么：

function change_numbr(selected_numbr) { 
 

 
    var value_numbr = document.getElementById(selected_numbr).value; 
 
    var total_numbr = document.getElementsByClassName("numbr"); 
 
    var i; 
 
    for (i = 1; i < total_numbr.length; i++) { 
 
    if (document.getElementById("check"+i).checked) { 
 
     document.getElementById("label"+i).innerHTML = value_numbr; 
 

 
     } 
 
    } 
 
}

<form> 
 
    <fieldset> 
 
      <label for="check1">Check</label> 
 
      <input id="check1" type="checkbox" class="chkbox">   
 
      <label id="label1" for="number1">Number</label> 
 
      <input id="number1" type="text" class="numbr" value="324"> 
 
      <button type="button" onClick="change_numbr('number1')">click</button> 
 
    </fieldset> 
 
    <fieldset> 
 
      <label for="check2">Check</label> 
 
      <input id="check2" type="checkbox" class="chkbox">   
 
      <label id="label2" for="number2">Number</label> 
 
      <input id="number2" type="text" class="numbr" value="85"> 
 
      <button type="button" onClick="change_numbr('number2')">click</button> 
 
    </fieldset> 
 
    <fieldset> 
 
      <label for="check3">Check</label> 
 
      <input id="check3" type="checkbox" class="chkbox">   
 
      <label id="label1" for="number3">Number</label> 
 
      <input id="number3" type="text" class="numbr" value="3"> 
 
      <button type="button" onClick="change_numbr('number3')">click</button> 
 
    </fieldset> 
 
</form>

今后试图澄清变量名称为一个更清洁的readeable代码，问你是否有任何怀疑。 :)

来源

2017-03-04 17:37:36 EnriqueDev

你需要使用字符串，check没有定义。类似：

document.getElementById('check'+i).checked)

同样适用于数：

document.getElementById('number'+i).value

来源

2017-03-04 17:12:50

的标识numbr1，numbr2，numbr3不存在于DOM。我认为你在代码中将错误的ID传递给函数change_numbr（）。

但我认为这只是一个问题。

来源

2017-03-04 17:18:24 pwunderlich

我改变你的代码，它的工作原理。

这里是我测试过的代码。

<html> 
<head> 
    <title></title> 
    <script type="text/javascript"> 
function change_numbr(selected_numbr) { 
    alert('ciaoooo'); 
    var value_numbr = document.getElementById(selected_numbr).value; 
    console.log(value_numbr); 
    var total_numbr = document.getElementsByClassName("numbr"); 
    console.log(value_numbr.length); 
    var i; 
    for (i = 1; i < total_numbr.length; i++) { 
    if (document.getElementById('check' + i).checked) { 
     document.getElementById('number' + i).value = value_numbr; 

     } 
    } 
} 
</script> 

</head> 
<body> 
    <form> 
    <fieldset> 
      <label for="check1">Check</label> 
      <input id="check1" type="checkbox" class="chkbox">   
      <label for="number1">Number</label> 
      <input id="number1" type="text" class="numbr" value="324"> 
      <button type="button" onClick="change_numbr('number1')">click</button> 
    </fieldset> 
    <fieldset> 
      <label for="check2">Check</label> 
      <input id="check2" type="checkbox" class="chkbox">   
      <label for="number2">Number</label> 
      <input id="number2" type="text" class="numbr" value="85"> 
      <button type="button" onClick="change_numbr('number2')">click</button> 
    </fieldset> 
    <fieldset> 
      <label for="check3">Check</label> 
      <input id="check3" type="checkbox" class="chkbox">   
      <label for="number3">Number</label> 
      <input id="number3" type="text" class="numbr" value="3"> 
      <button type="button" onClick="change_numbr('number3')">click</button> 
    </fieldset> 
</form> 


</body> 
</html>

看看你的旧代码的区别。

来源

2017-03-04 17:31:25

我认为这是你需要的。

function change_numbr(selected_numbr) { 
 
    var value_numbr = document.getElementById(selected_numbr).value; 
 
    var total_numbr = document.getElementsByClassName("numbr"); 
 
    var i; 
 
    for (i = 1; i <= total_numbr.length; i++) { 
 
    if (document.getElementById('check'+i).checked) { 
 
     document.getElementById('number'+i).value = value_numbr; 
 
     } 
 
    } 
 
}

<form> 
 
    <fieldset> 
 
      <label for="check1">Check</label> 
 
      <input id="check1" type="checkbox" class="chkbox">   
 
      <label for="number1">Number</label> 
 
      <input id="number1" type="text" class="numbr" value="324"> 
 
      <button type="button" onclick="change_numbr('number1')">click</button> 
 
    </fieldset> 
 
    <fieldset> 
 
      <label for="check2">Check</label> 
 
      <input id="check2" type="checkbox" class="chkbox">   
 
      <label for="number2">Number</label> 
 
      <input id="number2" type="text" class="numbr" value="85"> 
 
      <button type="button" onclick="change_numbr('number2')">click</button> 
 
    </fieldset> 
 
    <fieldset> 
 
      <label for="check3">Check</label> 
 
      <input id="check3" type="checkbox" class="chkbox">   
 
      <label for="number3">Number</label> 
 
      <input id="number3" type="text" class="numbr" value="3"> 
 
      <button type="button" onclick="change_numbr('number3')">click</button> 
 
    </fieldset> 
 
</form>

来源

2017-03-04 17:58:00 Stanly

更改复选框选中的值（循环不工作）

回答

相关问题