Question

我asked a similar question yesterday，但这种情况有点不同，因为有几个无线电选项（可以是任意数量），我需要选择它们兄弟复选框（将被隐藏）。

编辑（更多信息）：此外：<div class="item">

中可能有多个<div class="panel-body">

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

<德尔> https://jsfiddle.net/ByteMyPixel/cqdj4jt6/1/
更新的FIDDLE：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);
    });
});

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

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

如何在组中选择无线电选项，以选择兄弟（隐藏）复选框？

1 个答案: