Question

我需要在几个表单字段中多次使用此js脚本。它非常适用于一个字段，但我不知道如何复制此脚本以同时在其他字段中使用。每个复选框选项都会加载RegEx完成的预定义值。因此，下面的所有代码都属于一个表单字段。

<head>

<!-- CHECKBOXSES REGEX 1 -->

<script type="text/javascript">

function getVal(bu){

var el=document.getElementById('col12_filter_prospective');
var i=0, c;while(c=document.getElementById('chk'+(i++))) 
{el.value=(bu.checked)? bu.value : null;c!=bu? c.checked =false : null;
}
}
</script>

</head>

<body>

<input type="checkbox" name="chk" value="[^***]" id="chk0" onclick="getVal(this)" title="[^***] Replace (***) with the word to excluded from search.">
<input type="checkbox" name="chk" value="/whatever[^s]*./" id="chk1" onclick="getVal(this)" title="/whatever[^s]*./ Find (whatever) words that ends with (s) or any other combination.">
<input type="checkbox" name="chk" value="/***/" id="chk2" onclick="getVal(this)" title="/***/ Replace *** for specific word to be found.">

<br>
<input type="text" class="column_filter_prospective" name="col12_filter_prospective" id="col12_filter_prospective">

</body>

Answer 1

将表单元素放在一个具有某个类attrbiute值的容器中，将多个容器插入到html中，找到所有给定类名的容器，使用querySelector通过他们的名称或类attr查找子元素（NOT id ）。

Answer 2

首先，我对代码进行格式化以使其更具可读性。您将进行的更改如下

getVal()方法现在接收2个参数。第二个参数是相关文本输入字段的id。
删除所有复选框ID，为所有复选框添加一个类（我在所有复选框中添加一个名为“chk0”的类）。
修改getVal()方法如下

<head>
  <!-- CHECKBOXSES REGEX 1 -->

  <script type="text/javascript">
    function getVal(bu, id){
      var el = document.getElementById(id);
      
      var checkboxes = document.getElementsByClassName(bu.className);
      for (i = 0; i < checkboxes.length; i++) {
        el.value = (bu.checked)? bu.value : null;
        checkboxes[i] != bu ? checkboxes[i].checked = false : null;
      }
    }
  </script>

</head>

<body>

  <input type="checkbox" name="chk" value="[^***]" class="chk0"
    onclick="getVal(this, 'col12_filter_prospective')"
    title="[^***] Replace (***) with the word to excluded from search.">
  
  <input type="checkbox" name="chk" value="/whatever[^s]*./" class="chk0"
    onclick="getVal(this, 'col12_filter_prospective')"
    title="/whatever[^s]*./ Find (whatever) words that ends with (s) or any other combination.">
  
  <input type="checkbox" name="chk" value="/***/" class="chk0"
    onclick="getVal(this, 'col12_filter_prospective')"
    title="/***/ Replace *** for specific word to be found.">

  <br>
  <input type="text"
    class="column_filter_prospective"
    name="col12_filter_prospective"
    id="col12_filter_prospective">
</body>

您可以按如下方式添加新输入

<input type="checkbox" name="chk" value="[^***]" class="chk1"
  onclick="getVal(this, 'col13_filter_prospective')"
  title="[^***] Replace (***) with the word to excluded from search.">

<input type="checkbox" name="chk" value="/whatever[^s]*./" class="chk1"
  onclick="getVal(this, 'col13_filter_prospective')"
  title="/whatever[^s]*./ Find (whatever) words that ends with (s) or any other combination.">

<input type="checkbox" name="chk" value="/***/" class="chk1"
  onclick="getVal(this, 'col13_filter_prospective')"
  title="/***/ Replace *** for specific word to be found.">

<br>
<input type="text"
  class="column_filter_prospective"
  name="col13_filter_prospective"
  id="col13_filter_prospective">

让我知道它是否适合你

Answer 3

我想解决另一个问题。我把互联网放在一边，找不到一个合理的脚本来执行这个版本虽然这是一个简单的例行程序。 - Paulo Lopes 26分钟前

当你看到执行ID问题后的代码时，我想自动取消选中“智能搜索”复选框，并在点击三个RegEx复选框之一时检查RegEx复选框，当三个复选框之一是取消选中将所有内容转换为原始状态，其中“智能搜索”复选框是唯一再次选中的复选框。太混乱了？ - Paulo Lopes 22分钟前

<tr id="filter_col12_prospective" data-column="12">         
<td colspan="4"><hr width="100%"  size"0.5px"> 
</td>           
<tr>
<tr>
<td>City</td>
<td align="center">             
<input type="checkbox" name="chk" value="[^***]" id="chk0" onclick="getVal(this)" title="[^***] Replace (***) with the word to excluded from search.">  
<input type="checkbox" name="chk" value="/whatever[^s]*./" id="chk1" onclick="getVal(this)" title="/whatever[^s]*./ Find (whatever) word that ends with (s) or any other combination.">
<input type="checkbox" name="chk" value="/***/" id="chk2" onclick="getVal(this)" title="/***/ Replace *** for specific word to be found.">
<br>
<input type="text" class="column_filter_prospective" name="col12_filter_prospective" id="col12_filter_prospective">
</td>               
<td align="center" valign="top"><input type="checkbox" class="column_filter_prospective" id="col12_regex_prospective">
</td>
<td align="center" valign="top"><input type="checkbox" class="column_filter_prospective" id="col12_smart_prospective" checked="checked">
<br>
</td>
</tr>

=========================== 例如，请检查高级搜索[link] http://goutam.webigniter.ca/datatable.html

javascript重复ID冲突

3 个答案: