更改複選框選中的值（循環不工作）

-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

更改複選框選中的值（循環不工作）

回答

相關問題