javascript duplication ID conflict

问题

I need to use this js script several times, in several form fields. It is working wonderfully for one field but I don't know how to duplicate this script to use in other fields at the same time. Every checkbox choice loads pre-defined values for RegEx completion. So, all the code below belongs to one form field.

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

回答1:

Place form elements in a one container with some class attrbiute value, insert multiple containers into the html, find all containers with class name given, use querySelector to find child elements by theirs name or class attr(NOT id).

回答2:

First, I format your code a bit to make it more readable. The changes you will make is as follows

getVal() method now receives 2 parameters. The 2nd parameter is the id of the related text input field.
Remove all checkbox IDs, add a class to all checkboxes (I add a class named "chk0" to all checkboxes).
Modify getVal() method as follows

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

You can add a new input as follows

<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">

Let me know if it works for you

回答3:

There is another issue I would like to resolve. I put the internet up side down and couldn't find a reasonable script to perform this tas although it is a simple routine. – Paulo Lopes 26 mins ago

As you see the code bellow after the implementation of the ID issue I would like to automatically uncheck the "smart search" checkbox and check the RegEx checkbox when one of the three RegEx checkboxes is clicked AND when one of the three checkboxes is unchecked to turn everything to the original state where the "smart search" checkbox is the only one selected again. Too confusing? – Paulo Lopes 22 mins ago

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

=========================== example, check advanced search [link]http://goutam.webigniter.ca/datatable.html

来源：https://stackoverflow.com/questions/27302099/javascript-duplication-id-conflict

标签

javascript

regex

conflict