javascript 如何在不使用任何id的情况下通过$.each更改select?

epggiuax  于 2023-04-19  发布在  Java
关注(0)|答案(1)|浏览(106)

我有一个使用Bootstrap容器的表单,行和列。在每一行中可以是1+列,在每一列中可以是两个之一:
1.复选框,标签,选择:

<input type="checkbox">
<label> Some lable_1 </label>
<select class="select2">
  <option> Something </option>
</select>

或2)复选框、标签、输入:

<input type="checkbox">
<label> Some label_2 </label>
<input type="text" class="form-control">

我也有一个按钮来清除每个选择/输入的复选框是真的。没有在每个col复选框是第一个元素和选择/输入-最后
下面是我的按钮代码:<button type="button" class="btn btn-default" onclick="ClearSelectedElems($('#MyFormId'))" > Clear all checked </button>
下面是我的函数代码:

function ClearSelectedElems(form) {
  $.each(form[0]['children'], function(index_row, value_row) {
    var row = form[0]['children'][index_row];
    $.each(row['children'], function(index_col, value_col) {
      var col = row['children'][index_col];
      var first = col['children'][0];
      var prev_last = col['children'][col['children']['length'] - 2];
      var last = col['children'][col['children']['length'] - 1];

      //console.log("first['checked']", first['checked']);
      //console.log("prev_last", prev_last);
      //console.log("prev_last['value']", prev_last['value']);          
      //console.log("last", last);

      if (first['checked']) {
        last['value'] = '777777';
        prev_last['value'] = '777777';
      }
    })
  })
}

关于我的代码:函数获取一个jQuery对象作为输入参数第一次循环遍历所有行;第二个循环遍历当前行中的所有列;var first-当前行和列的复选框;var prev_last- select或一些rubish(我将在下面解释);var last-当前行和列的输入;

`if ()` - if checkbox is checked ---> change select / input field

我一起使用prev_last和last,因为当我遇到select时,它不是当前对象的子对象中的最后一个元素,它有:[0 - ..., 1 - ..., n-1 - select, n - span]
我想通过jQuery的$.each来清除所有没有id的选中元素,但是我遇到了一个我无法解决的问题。我希望我已经把我的问题写得很清楚,你能够理解这个条件并帮助我。
我已经学会了如何从复选框中获取'checked'属性,我也可以从输入中获取和设置'value'属性,我现在唯一不能做的就是获取/设置输入的值(当我写prev_last ['value']时会抛出错误,你能帮我吗?
我只尝试了上面的算法,但没有成功。我也试过通过id来实现,但也失败了。(想提一下,第一个想法对我的外观更好,因为我可以轻松地添加/删除行和cols,它将工作,无论如何,不需要重写所有id的程序员的手)

0yycz8jy

0yycz8jy1#

我想这就是你要找的东西。

  • 我在网格中有行和列。
  • 列将始终包含一个复选框和一个输入或一个选择。
  • 按下按钮时,我想清除checked复选框同一列中所有输入/选择的值

我的方法是;
1.找到所有checked复选框

let checked = $(".col>input[type='checkbox']:checked");

1.循环播放
1.使用siblings()在同一列中定位input / select
1.清除输入中的值和检查状态。

$(function() {
  $("button.clear").on("click", function() {
    let checked = $(".col>input[type='checkbox']:checked");
    checked.each(function(idx, elem) { //elem is a checked checkbox in a column
      $(elem).siblings("input, select").val(""); //clear any input/select in the same column
      $(elem).prop("checked", false); //uncheck the box
    });
  });
});
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
  <div class='row'>
    <div class='col'><input type="checkbox">
      <label> Some lable_1 </label>
      <select class="select2">
        <option> Something </option>
      </select>
    </div>
  </div>
  <div class='row'>
    <div class='col'><input type="checkbox">
      <label> Some lable_1 </label>
      <select class="select2">
        <option> Something </option>
      </select>
    </div>
  </div>
  <div class='row'>
    <div class='col'><input type="checkbox">
      <label> Some lable_1 </label>
      <input value="superman" type="text" />
    </div>
  </div>
  <div class='row'>
    <div class='col'><input type="checkbox">
      <label> Some lable_1 </label>
      <select class="select2">
        <option> Something </option>
      </select>
    </div>
  </div>
</div>
<button class="clear">clear</button>

相关问题