组合框更改时删除复选框和文本值

remove checkbox and text value when combobox change

本文关键字：复选框 文本 删除 组合      更新时间：2023-09-26

我的代码有问题。我希望这里的任何人都可以帮助我修复它。我在select输入的更改事件上从文本中删除值时遇到问题。

这是我的js代码：

$(document).ready(function() {
  $('.select').change(function() {
    var check = $(this).closest('tr').find("input[type='checkbox']").attr('id');
    $('#' + check + '').prop("checked", false);
    var txt = $(this).closest('tr').find("input[type='text']").attr('id');
    $('#' + txt + '').val("");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
  <tr>
    <th>SELECT TYPE</th>
    <th>TAKE IT</th>
    <th>YOUR CHOOSEN</th>
  </tr>
  <tr>
    <td>
      <select class="select" name="select1">
        <option>--CHOOSE--</option>
        <option value="Cars">Cars</option>
        <option value="Bike">Bike</option>
      </select>
    </td>
    <td>
      <input type="checkbox" name="check1" />
    </td>
    <td>
      <input type="text" name="input1" />
    </td>
  </tr>
  <tr>
    <td>
      <select class="select" name="select2">
        <option>--CHOOSE--</option>
        <option value="Cars">Cars</option>
        <option value="Bike">Bike</option>
      </select>
    </td>
    <td>
      <input type="checkbox" name="check2" />
    </td>
    <td>
      <input type="text" name="input2" />
    </td>
  </tr>
  <tr>
    <td>
      <select class="select" name="select3">
        <option>--CHOOSE--</option>
        <option value="Cars">Cars</option>
        <option value="Bike">Bike</option>
      </select>
    </td>
    <td>
      <input type="checkbox" name="check3" />
    </td>
    <td>
      <input type="text" name="input3" />
    </td>
  </tr>
</table>

注意：我正在从数据库中加载数据并将结果显示为文本，并根据客户选择自动选中复选框。当客户想要编辑数据时，他们将更改选择输入，并且文本和复选框应清晰。我只能删除选中的复选框，但无法清除文本。有人请帮忙。我真的很感激任何帮助。

我认为您在了解脚本的工作方式方面遇到了问题。

 var check = $(this).closest('tr').find("input[type='checkbox']").attr('id');
 var txt = $(this).closest('tr').find("input[type='text']").attr('id');

这两个代码查找input checkbox和input text的id。

如我所见，没有为这两个元素定义id。所以这些变量中什么都没有（undefined），因此代码将不起作用。

一个解决方案是：

您可以将 id 添加到这些字段。喜欢

<tr>
  <td><select class="select" name="select1">
  <option>--CHOOSE--</option><option value="Cars">Cars</option><option value="Bike">Bike</option>
  </select> </td>
  <td><input type="checkbox" name="check1" id="check1" /></td>
  <td><input type="text" name="input1" id="input1" /></td>
</tr>
<tr>
  <td>
  <select class="select" name="select2"><option>--CHOOSE--</option><option value="Cars">Cars</option><option value="Bike">Bike</option>
  </select></td>
  <td><input type="checkbox" name="check2" id="check2" /></td>
  <td><input type="text" name="input2" id="input2" /></td>

另一个解决方案：

您可以像这样修改脚本。

 $(document).ready(function(){
    $('.select').change(function(){
        var check =         $(this).closest('tr').find("input[type='checkbox']");
    
        $(check).prop("checked",false);
        var txt = $(this).closest('tr').find("input[type='text']");
     
        $(txt).val("");
    });
});

$(document).ready(function(){
$('.select').change(function(){
    $(this).parent().parent().find("input[type='text']").val("");        $(this).parent().parent().find("input[type='checkbox']").prop("checked",false);
});});

请尝试这个朋友，我会正常工作

相关文章：