Javascript复选框添加值Textarea

Javascript Checkbox add value Textarea

本文关键字：Textarea 添加 复选框 Javascript      更新时间：2023-09-26

我有一个这样的代码:

var fails = 'fail';
var sucs = 'success';
function showResult(state){
	if(state){
      document.getElementById("hasil").value=sucs;
    }else{
      document.getElementById("hasil").value=fails;
    }									
}
<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>

我想创建那个复选框，如果点击它，它会把那一行的textarea改成success。如果我取消选中，它会变回fail。有人能帮我吗?

只对第一行有效。

如@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>

相关文章：