在多个 <input> 名称值上运行相同的 JS 函数

Posted 2023-05-08

【中文标题】在多个 <input> 名称值上运行相同的 JS 函数

【英文标题】：Running the same JS function on multiple <input> name values

【发布时间】：2021-11-25 02:48:09

【问题描述】：

大家好，首先感谢您的帮助！

我在使用复选框和 .js 时遇到了一些问题，因为这是我第一次使用它们。

我会提供一个小提琴，以便您查看问题。

我有一个 .js 函数，当多个复选框被选中并且一切正常时，它与“输入名称 =”一起显示某个 div。

问题是，我想将我的复选框分组到不同的类别中，以便以后有可能一次只为每个类别选择一个复选框。

更改 "name=" 值似乎是最聪明和最简单的事情，但一旦我更改了它，在 .js 和 html 文件中，一切都停止工作。

所以问题是：如何使用不同的名称值复制我的 .js 函数？

示例：第一个类别是“颜色”，它们都将被命名为“cc”， 第二类是“rims”，它们都将被命名为“bb”，第三类是“pads”，它们都将被命名为“aa”

非常感谢。

这是小提琴：https://jsfiddle.net/q98pvLk0/

html:

    <div id="configurations">
<div id="colorbuttons">
  <h1>Colors</h1>
  <input type="checkbox" id="yellow" name="cc" value="yellow_div_id" data-ref="yellow_div_id" />
  <label>Yellow</label>
  <input type="checkbox" id="green" name="cc" value="green_div_id" data-ref="green_div_id" />
  <label>Green</label>
  <input type="checkbox" id="red" name="cc" value="red_div_id" data-ref="red_div_id" />
  <label>Red</label>
  <input type="checkbox" id="blue" name="cc" value="blue_div_id" data-ref="blue_div_id" />
  <label>Blue</label>
  <input type="checkbox" id="orange" name="cc" value="orange_div_id" data-ref="orange_div_id" />
  <label>Orange</label>
  <input type="checkbox" id="purple" name="cc" value="purple_div_id" data-ref="purple_div_id" />
  <label>Purple</label>
  <input type="checkbox" id="lightblue" name="cc" value="lightblue_div_id" data-ref="lightblue_div_id" />
  <label>Light Blue</label>
  <input type="checkbox" id="magenta" name="cc" value="magenta_div_id" data-ref="magenta_div_id" />
  <label>Magenta</label>
  <input type="checkbox" id="aubergine" name="cc" value="aubergine_div_id" data-ref="aubergine_div_id" />
  <label>Aubergine</label>
  <input type="checkbox" id="turquoise" name="cc" value="turquoise_div_id" data-ref="turquoise_div_id" />
  <label>Turquoise</label>
</div>
<div id="rimsbuttons">
  <h1>Rims</h1>
  <input type="checkbox" id="cerchio1" name="cc" value="cerchio1_div_id" data-ref="cerchio1_div_id" />
  <label>Cerchio 1</label>
  <input type="checkbox" id="cerchio2" name="cc" value="cerchio2_div_id" data-ref="cerchio2_div_id" />
  <label>Cerchio 2</label>
</div>
<div id="padsbuttons">
  <h1>Pads</h1>
  <input type="checkbox" id="pinza1" name="cc" value="pinza1_div_id" data-ref="pinza1_div_id" />
  <label>Pinza 1</label>
  <input type="checkbox" id="pinza2" name="cc" value="pinza2_div_id" data-ref="pinza2_div_id" />
  <label>Pinza 2</label>
</div>
</div>
<!-- Loaded/hidden content div-->
<div id="listings">
 <div class="hide-me" id="default">
   <ul class="rslides">
     <li><img src="img/default_1_1_view1.png" ></li>
     <li><img src="img/default_1_1_view2.png" ></li>
     <li><img src="img/default_1_1_view3.png" ></li>
   </ul>
 </div>
 <div class="hide-me" id="defaultcerchio2pinza1_div_id">
   <ul class="rslides">
     <li><img src="img/default_2_1_view1.png" ></li>
     <li><img src="img/default_2_1_view2.png" ></li>
     <li><img src="img/default_2_1_view3.png" ></li>
   </ul>
 </div>
 <div class="hide-me" id="defaultcerchio2pinza2_div_id">
   <ul class="rslides">
     <li><img src="img/default_1_2_view1.png" ></li>
     <li><img src="img/default_1_2_view2.png" ></li>
     <li><img src="img/default_1_2_view3.png" ></li>
   </ul>
 </div>
 <div class="hide-me" id="defaultcerchio1">
   <ul class="rslides">
     <li><img src="img/default_2_2_view1.png" ></li>
     <li><img src="img/default_2_2_view2.png" ></li>
     <li><img src="img/default_2_2_view3.png" ></li>
   </ul>
 </div>
 <div class="hide-me" id="yellowcerchio1pinza1_div_id" style="display:none;">
   <ul class="rslides">
     <li><img src="img/yellow_1_1_view1.png" ></li>
     <li><img src="img/yellow_1_1_view2.png" ></li>
     <li><img src="img/yellow_1_1_view3.png" ></li>
   </ul>
 </div>
 <div class="hide-me" id="yellowcerchio1pinza2_div_id" style="display:none;">
   <ul class="rslides">
     <li><img src="img/yellow_1_2_view1.png" ></li>
     <li><img src="img/yellow_1_2_view2.png" ></li>
     <li><img src="img/yellow_1_2_view3.png" ></li>
   </ul>
 </div>
 <div class="hide-me" id="yellowcerchio2pinza2_div_id" style="display:none;">
   <ul class="rslides">
     <li><img src="img/yellow_2_2_view1.png" ></li>
     <li><img src="img/yellow_2_2_view2.png" ></li>
     <li><img src="img/yellow_2_2_view3.png" ></li>
   </ul>
 </div>
 <div class="hide-me" id="yellowcerchio2pinza1_div_id" style="display:none;">
   <ul class="rslides">
     <li><img src="img/yellow_2_1_view1.png" ></li>
     <li><img src="img/yellow_2_1_view2.png" ></li>
     <li><img src="img/yellow_2_1_view3.png" ></li>
   </ul>
 </div>
 <div class="hide-me" id="orangecerchio1pinza1_div_id" style="display:none;">
   <ul class="rslides">
     <li><img src="img/orange_1_1_view1.png" ></li>
     <li><img src="img/orange_1_1_view2.png" ></li>
     <li><img src="img/orange_1_1_view3.png" ></li>
   </ul>
 </div>
 <div class="hide-me" id="orangecerchio2pinza1_div_id" style="display:none;">
   <ul class="rslides">
     <li><img src="img/orange_2_1_view1.png" ></li>
     <li><img src="img/orange_2_1_view2.png" ></li>
     <li><img src="img/orange_2_1_view3.png" ></li>
   </ul>
 </div>
 <div class="hide-me" id="orangecerchio2pinza2_div_id" style="display:none;">
   <ul class="rslides">
     <li><img src="img/orange_2_2_view1.png" ></li>
     <li><img src="img/orange_2_2_view2.png" ></li>
     <li><img src="img/orange_2_2_view3.png" ></li>
   </ul>
 </div>
 <div class="hide-me" id="orangecerchio1pinza2_div_id" style="display:none;">
   <ul class="rslides">
     <li><img src="img/orange_1_2_view1.png" ></li>
     <li><img src="img/orange_1_2_view2.png" ></li>
     <li><img src="img/orange_1_2_view3.png" ></li>
   </ul>
 </div>
</div>

js:

$(document).ready(function () 

    // select checkboxes by name
    var packages = $("input[name='cc']");
    // set main div id
    var packageDiv = $("#listings");

    // bind to change event
    packages.change(function () 

        // empty array
        var idArr = [];
        // get the checked values
        var checked = $("input[name='cc']:checked");
        // loop and build array
        checked.each(function () 
            idArr.push($(this).prop("id"));
        );

        // remove whitespace from multiple checkboxes array
        var trimArray = idArr.join("");

        toggleShowHide(trimArray, packageDiv);

    );

);

function toggleShowHide(arr, elem) 

    var arrLen = arr.length;

    // clear last selection when unchecking boxes
    $(".hide-me").hide();

    // set default if array is empty
    if (arrLen < 1 )
        setDefault(elem);
    

    // run the show hide based on array of selection

    for(i = 0; i < arrLen; i++) 
        // set the name for the selected div
        var temp = "#" + arr + "_div_id";

        $(temp).show();
        $("#default").hide();

    

    // unhide
    elem.show();



function setDefault(elem)
    $("#default").show();


//SLIDESHOW

  $(function() 
    $(".rslides").responsiveSlides(
      auto:false,
      nav:true,
    );
  );

css:

#configurations
  float: left;
  width:20vw;

#colorbuttons
  float: left;
  width:20vw;


#rimsbuttons
  float: left;
  width:20vw;


#padsbuttons
  position:float;
  float: left;
  width:20vw;


#listings
  position:float;
  float: left;
  width:80vw;
  margin: 0 auto;


.rslides 
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  

.rslides li 
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  

.rslides li:first-child 
  position: relative;
  display: block;
  float: left;
  

.rslides img 
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  

【问题讨论】：

“每次只有一个复选框用于选择每个类别”，如果您只想选择一组输入中的一个输入，请使用无线电输入而不是复选框

这样的问题是创建单选按钮组，这是主要问题，如果我使用“cc”以外的其他名称创建单选组，则 js 停止工作，我错过了将 .js 函数适应其他名称的知识

我会添加一个定义复选框组的类名，然后您只能基于此选择一个。或调试/确定“cc”停止工作的原因。

我正在尝试确定为什么当我将我的 js 目标从“cc”更改为其他内容时停止工作，这就是我需要你帮助的地方

【参考方案1】：

找到了解决方案，我只需要使用“form”标签将单选按钮分组在不同的 div 中，使用此标签我可以在每个输入上保留“cc”名称，但同时将它们放在不同的组中，谢谢你所有的答案！