Question

JS小提琴：

你需要Bootstrap.js。

其他一些SA线程表示这可能是一个委托问题，但我认为没有理由委托我拥有的代码，因为选择器永远不会在HTML中更改或消失。

当我点击First Radio时，手风琴会掉下来，但是当我点击它时手风琴并不像我想要的那样隐藏。我编写了我的代码，以便在单选按钮的change上检查是否选中了单选按钮，如果没有，则会折叠手风琴。

          <div class="radio col-xs-12">
            <label>
              <input type="radio" name="radios" class="track-order-change" id="firstRadio" value="">
              First Radio
            </label>
          </div>

          <div class="col-xs-12 panel-collapse collapse" id="firstAccordion">
            <div>
              First Accordion
            </div>
          </div>

          <div class="radio col-xs-12">
            <label>
              <input type="radio" name="radios" class="track-order-change" id="secondRadio">
              Second Radio
            </label>
          </div>

          <div class="col-xs-12 panel-collapse collapse" id="secondAccordion">
            <div>
              Second Accordion
            </div>
          </div>

          <div class="radio col-xs-12">
            <label>
              <input type="radio" name="radios" class="track-order-change" id="thirdRadio">
              Third Radio with no Accordion
            </label>
          </div>


$('input[id="firstRadio"]').change(function () {

    if ($(this).is(":checked")) {

        $('#firstAccordion').collapse('show');

    } else {

        $('#firstAccordion').collapse('hide');
    }

});

Answer 1

更改事件仅附加到第一个单选按钮。更改事件仅在用户单击的单选按钮上触发，因此单击任何其他单选按钮时，不会触发第一个单击上的事件。

换句话说，事件不是仅触发一次，而是看起来那样，因为它只在点击第一个单选按钮时触发。

将事件附加到所有单选按钮：

$('input[name="radios"]').change( function() {
    if ($('#firstRadio').is(":checked")){
        $('#firstAccordion').collapse('show');
    } else {
        $('#firstAccordion').collapse('hide');
    }
});

Demo

Answer 2

尝试使用此代码..我为您做了这个，但下次尝试自己编码..这会对您有所帮助..

$('input[type="radio"]').change( function() {
        if ($(this).attr("id") == "firstRadio"){
            if($(this).is(":checked")){
                $('#firstAccordion').show("fast");
                $('#secondAccordion').hide("fast");
                $('#thirdAccordion').hide("fast");
            }
        } else if ($(this).attr("id") == "secondRadio"){
            if($(this).is(":checked")){
                $('#firstAccordion').hide("fast");
                $('#secondAccordion').show("fast");
                $('#thirdAccordion').hide("fast");
            }
        } else if ($(this).attr("id") == "thirdRadio"){
            if($(this).is(":checked")){
                $('#firstAccordion').hide("fast");
                $('#secondAccordion').hide("fast");
                $('#thirdAccordion').show("fast");
            }
        }
  });

为什么我的jquery .change事件只在单选按钮上运行一次？

2 个答案: