的Javascript複選框增值textarea的

Question

我有一個代碼，像這樣：

var fails = 'fail'; 
 
var sucs = 'success'; 
 

 
function showResult(state){ 
 
\t if(state){ 
 
     document.getElementById("hasil").value=sucs; 
 
    }else{ 
 
     document.getElementById("hasil").value=fails; 
 
    } \t \t \t \t \t \t \t \t \t 
 
}

<form> 
 
    <table border='1'> 
 
    <tr> 
 
     <th>TARGET</th> 
 
     <th>RESULT</th> 
 
     <th>NOTES</th> 
 
    </tr> 
 
    <tr> 
 
     <td><input type='checkbox' name='target' onclick='showResult(this.checked);' /></td> 
 
     <td><textarea name='result[]' id='hasil'>fail</textarea></td>  <td><textarea name='notes[]' class='form-control'></textarea></td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type='checkbox' name='target' onclick='showResult(this.checked);' /></td> 
 
     <td><textarea name='result[]' id='hasil'>fail</textarea></td>  <td><textarea name='notes[]' class='form-control'></textarea></td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type='checkbox' name='target' onclick='showResult(this.checked);' /></td> 
 
     <td><textarea name='result[]' id='hasil'>fail</textarea></td>  <td><textarea name='notes[]' class='form-control'></textarea></td> 
 
    </tr> 
 
</form>

我希望創建一個複選框，如果它被點擊，它會在該行改變文本區域到success。如果我取消選中，它將變回fail。誰能幫我？

Answer 1

它只適用於第一行。

@epascarello說，因爲ids是單數。所以您需要選擇父tr，找到文本區域並設置值。

你可以這樣做。

$('[type=checkbox]').change(function() { 
 

 
    if ($(this).is(":checked")) { 
 
    var $row = $(this).parents('tr'); 
 
    $row.find('textarea[name="result[]"]').text("sucess"); 
 
    } else { 
 
    var $row = $(this).parents('tr'); 
 
    $row.find('textarea[name="result[]"]').text("fail"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <table border='1'> 
 
    <tr> 
 
     <th>TARGET</th> 
 
     <th>RESULT</th> 
 
     <th>NOTES</th> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type='checkbox' name='target' /> 
 
     </td> 
 
     <td> 
 
     <textarea name='result[]' id='hasil'>fail</textarea> 
 
     </td> 
 
     <td> 
 
     <textarea name='notes[]' class='form-control'></textarea> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type='checkbox' name='target' /> 
 
     </td> 
 
     <td> 
 
     <textarea name='result[]' id='hasil'>fail</textarea> 
 
     </td> 
 
     <td> 
 
     <textarea name='notes[]' class='form-control'></textarea> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <input type='checkbox' name='target' /> 
 
     </td> 
 
     <td> 
 
     <textarea name='result[]' id='hasil'>fail</textarea> 
 
     </td> 
 
     <td> 
 
     <textarea name='notes[]' class='form-control'></textarea> 
 
     </td> 
 
    </tr> 
 
</form>