如何在组中获得任一单选选项，以选择兄弟（隐藏）复选框？

Posted 2023-03-27

【中文标题】如何在组中获得任一单选选项，以选择兄弟（隐藏）复选框？

【英文标题】：How can I get either radio option in a group, to select sibling (hidden) checkboxes?

【发布时间】：2018-05-22 00:34:19

【问题描述】：

我asked a similar question yesterday，但这种情况有点不同，因为有几个单选选项（可以是任意数量），我需要其中任何一个来选择兄弟复选框（这将被隐藏）。

编辑（更多信息）：此外：<div class="panel-body"> 中可以有多个 <div class="item">

这是一个小提琴 - 到目前为止，只有最后一个收音机选择了复选框：

https://jsfiddle.net/ByteMyPixel/cqdj4jt6/1/ 更新的小提琴：https://jsfiddle.net/ByteMyPixel/cqdj4jt6/3/

这是 html：

<div class="panel-body rosette-body">

    <div class="item">
        <div class="the-options checkbox-wrapper">

            <div class="set checker">
                <input id="green-abalone-ring" name="rosette_option" type="radio" value="Green Abalone Ring"> 
                <label for="green-abalone-ring">Green Abalone Ring</label>
            </div>

            <div class="set checker">
                <input id="bloodwood-ring" name="rosette_option" type="radio" value="Bloodwood Ring"> 
                <label for="bloodwood-ring">Bloodwood Ring</label>
            </div>

            <div class="set checker">
                <input id="koa-wood-ring" name="rosette_option" type="radio" value="Koa Wood Ring"> 
                <label for="koa-wood-ring">Koa Wood Ring</label>
            </div>

            <div class="hidden-set">
                <input name="rosette_title" type="checkbox" value="Simple Rosette example">
                <input name="rosette_img" type="checkbox" value="/images/uploads/main/simple-rosette.jpg">
            </div>
        </div>
    </div><!-- [END] item -->

</div>

我尝试使用的 jQuery：

$(document).on('change', '.rosette-body .checker input[type="radio"]', function() 
  $(this)
    .parents('.panel-body.rosette-body')
    .find('.checker')
    .each(function() 
      //var checkboxes = $(this).siblings('input[type="checkbox"]'),
      var checkboxes = $(this).siblings('.hidden-set').find('input[type="checkbox"]'),
        radio = $('input[type="radio"]', this).get(0);

      checkboxes.prop('checked', radio.checked);
    );
);

【问题讨论】：

是的，each 语句获取每个单选框的值并使用它们来设置复选框的状态。因此，如果您单击第一个收音机，则将复选框设置为打开，然后关闭，然后关闭。如果单击第二个，关闭，然后打开，然后关闭。只有当您单击第三个收音机时，您才会将它们关闭，然后关闭，然后再打开。不确定您要实现的具体目标，但使用 each() 会破坏这一点。

基本上，我只是试图拥有它，以便选择/选中“复选框包装器”中的任何一个，然后检查同一“Checkbox-Wrapper”中的复选框（或在同一个“项目”内就足够了）。因此，如果我单击第一个、第二个、第三个或其他单选按钮，它将选择同一“面板主体”“项目”内的一组复选框

【参考方案1】：

我建议您不要费心遍历所有单选按钮，真的没有必要。您可能想要的只是当前选定单选按钮的值，以确定您将如何处理隐藏的复选框。如果是这种情况，下面的代码就是这样做的。最后一行是实际实例化我的 RadioToCheckboxWidget 的那一行，它使用适当的侦听器包装给定元素。当用户选择一个单选按钮时，我们得到所选单选按钮的值（在我的示例中是一个值或“”）。基于该值，我们遍历复选框并将它们设置为 ON 以获得实际值。

将此视为小提琴，here you go。

/*****
 * RadioToCheckboxWidget(jQueryDOMNode)
 *   The RadioToCheckboxWidget takes a collection of radio button els
 *   and a collection of checkbox els, then toggles the checkbox based
 *   on the status of the radio buttons. if the radio with NO value is
 *   selected, the checkboxes are unchecked. If any other radio button
 *   is selected, then the checkboxes are checked.
 *
 *****/
var RadioToCheckboxWidget = function(element) 
  this.el = element;
  this.__init();
;

$.extend(RadioToCheckboxWidget.prototype, 
  __init: function() 
    /***
     * This function was just edited, to allow the user to pass
     *  a collection of nodes. Thus, the user can either apply it
     *  one-by-one like this:
     *     var myRadio = new RadioToCheckboxWidget($("#myID") );
     *  ... or it can be applied to a collection of nodes like:
     *     var myRadios = new RadioToCheckboxWidget($(".item") );
     *
     *  The second scenario above is how I've applied it, but by doing
     *   the rewrite, there is flexibility.
     *
     ***/
     
     // iterate over every node in the jQuery collection, and
     //  set up each one as its own widget with its own listeners.
     //  by doing this, selections in one have no affect on others.
      this.el.each(function() 
        // convenience -- create a reference to the current el.
        var el = $(this);
        // references to the radio and checkbox els.
        var radioBtnEls = el.find(".checker");
        var checkboxEls = el.find(".hidden-set input[type=checkbox]");
        
        // listen for changes to ANY of the radio buttons
        el.on("change", radioBtnEls, function() 
          // if the radio has a value (so it's not 'None'), 
          //  we check the boxes. Otherwise, we UNcheck them.
            var toggleVal = $(this).find("input[type=radio]:checked").val();
            checkboxEls.each(function() 
                if (toggleVal == "") 
                  $(this).prop("checked", false);
                 else 
                  $(this).prop("checked", true);
                 // end if toggleVal
              ) // end checkboxEls.each()
          ) // end on change
      );
     // end init()

);


// This is the line that actually uses all the above code -- this
//  one line creates as many widgets as I have .item nodes.
var myRadioPanes = new RadioToCheckboxWidget($(".item"));

.item 
  border: 1px dotted #ccc;
  display: inline-box;
  float: left;
  padding: 10px;
  margin: 10px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body rosette-body">

  <fieldset class="item">
  <legend>
  Wooden ring:
  </legend>
  <div class="the-options checkbox-wrapper">

      <div class="set checker">
        
        <label><input name="rosette_option" type="radio" checked value=""> None</label>
      </div>
      <div class="set checker">
        <input id="green-abalone-ring" name="rosette_option" type="radio" value="Green Abalone Ring">
        <label for="green-abalone-ring">Green Abalone Ring</label>
      </div>

      <div class="set checker">
        <input id="bloodwood-ring" name="rosette_option" type="radio" value="Bloodwood Ring">
        <label for="bloodwood-ring">Bloodwood Ring</label>
      </div>

      <div class="set checker">
        <input id="koa-wood-ring" name="rosette_option" type="radio" value="Koa Wood Ring">
        <label for="koa-wood-ring">Koa Wood Ring</label>
      </div>

      <div class="hidden-set">
        <input name="rosette_title" type="checkbox" value="Simple Rosette example">
        <input name="rosette_img" type="checkbox" value="/images/uploads/main/simple-rosette.jpg">
      </div>
    </div>
  </fieldset>
  <!-- [END] item -->

  <fieldset class="item">
  <legend>
  Gold chain necklace:
  </legend>
    <div class="the-options checkbox-wrapper">

      <div class="set checker">
        
        <label><input name="chain_option" type="radio" checked value=""> None</label>
      </div>
      <div class="set checker">
        <input id="three-strand-braid" name="chain_option" type="radio" value="Three-strand braid">
        <label for="three-strand-braid">Three-strand braid</label>
      </div>

      <div class="set checker">
        <input id="five-strand-braid" name="chain_option" type="radio" value="Five-strand gold braid">
        <label for="five-strand-braid">Five-strand braid</label>
      </div>

      <div class="set checker">
        <input id="seven-strand-braid" name="chain_option" type="radio" value="Seven-strand braid">
        <label for="seven-strand-braid">Seven-strand braid</label>
      </div>

      <div class="hidden-set">
        <input name="chain_title" type="checkbox" value="Simple Chain example">
        <input name="chain_img" type="checkbox" value="/images/uploads/main/simple-chain.jpg">
      </div>
    </div>
  </fieldset>
  <!-- [END] item -->

</div>

根据您的要求，您想知道如何将其用于多个.items。一种方法或许是简单地硬引用每个.item。但这并不是一个很好的可扩展解决方案。相反，我重写了小部件的 __init() 函数，以便您可以传入一组 jQuery 节点，并将每个节点设置为独立的小部件。现在，您可以根据需要创建一组对特定节点的引用（如 new RadioToCheckBox($('#aSingleDOMNode') ); ），也可以创建对小部件的单个引用并传入整个集合（如 var myCollectionOfItems = new RadioToCheckbox($(".items") ); ）。

【讨论】：

啊！这太近了！我对此仍然存在的唯一问题是（我可能没有很好地解释）可能有不止一组“项目” - 如果有 2 个或更多，我该如何修改它以使其工作？ Updated fiddle.

@ByteMyPixel，我已经更新了我的演示以支持多个 .item 集合。如果您更喜欢小提琴版本：jsfiddle.net/snowMonkey/Lfx95zp2/2

或者，嘿，使用您已经在小提琴中拥有的确切代码，我只是使用稍微不同的方法来实例化小部件：jsfiddle.net/snowMonkey/eu6bkwkx/2 - 另一个更改，我将收音机移到了 '无'选项在其标签内。这样做可以使收音机的标签可点击，即使没有“for”属性。

这太棒了，非常感谢！它完美地工作:)

我很高兴，很高兴能提供帮助。