组合功能，使用jQuery在一组单选按钮中的单选按钮旁边显示输入字段

Question

我有一个广播组 ，其中包含n个选项。 每个单选按钮都位于滑块旁边，我仅在选中该组中的单选选项时才要显示。

我想我可以用id标识每个单选按钮n次，并用id标识每个滑块，以便在选中时显示它，例如：

if ($('#rToggle').is(':checked')) {
        $('#pSlider1').show(); }

我只是想知道是否有更好的方法来使用尽可能少的IF语句。

建议的代码（具有单独的ID）：

      <tr>
        <td class="first-column">&nbsp;</td>
        <td>
          <div class="layout-slider layout-slider-radio">
            <input type="radio" id="rToggle" name="periodType" default>
          </div>
          <div class="layout-slider layout-slider-label">Day</div>
          <div id="pSlider1" class="layout-slider layout-slider-slider">
            <input id="Slider2" type="slider" name="day" value="2;15" />
          </div>
        </td>
      </tr>

实际代码（无ID）：

      <tr>
        <td class="first-column">&nbsp;</td>
        <td>
          <div class="layout-slider layout-slider-radio">
            <input type="radio" name="periodType" default>
          </div>
          <div class="layout-slider layout-slider-label">Day</div>
          <div class="layout-slider layout-slider-slider">
            <input id="Slider1" type="slider" name="day" value="2;15" />
          </div>
        </td>
      </tr>
      <tr>
        <td class="first-column">&nbsp;</td>
        <td>
          <div class="layout-slider layout-slider-radio">
            <input type="radio" name="periodType" default>
          </div>
          <div class="layout-slider layout-slider-label">Month</div>
          <div class="layout-slider layout-slider-slider">
            <input id="Slider2" type="slider" name="month" value="2;15" />
          </div>
        </td>
      </tr>
      <tr>
        <td class="first-column">&nbsp;</td>
        <td>
          <div class="layout-slider layout-slider-radio">
            <input type="radio" name="periodType" default>
          </div>
          <div class="layout-slider layout-slider-label">Year</div>
          <div class="layout-slider layout-slider-slider">
            <input id="Slider3" type="slider" name="year" value="2;15" />
          </div>
        </td>
      </tr>

这些行进行了n次...

Answer 1

is：checked函数将仅检查一次状态。 您想要的是在未选中/选中时切换显示，因此您应使用如下更改事件：

$("input[type=radio][name=foo]").change(function() {
       $("#div").toggle();
});

Answer 2

您有几种选择。

将data-sliderid属性放在单选按钮上，并将ID放在包含滑块的<div>上，例如：

的HTML

<td>
    <div class="layout-slider layout-slider-radio">
        <input type="radio" name="periodType" data-sliderid="pSlider1" default>
    </div>
    <div class="layout-slider layout-slider-label">Day</div>
    <div id="pSlider1" class="layout-slider layout-slider-slider">
        <input id="Slider1" type="slider" name="day" value="2;15" />
    </div>
</td>

的JavaScript

$('input[name="periodType"]').change(function() {
    if(this.checked) {
        $('#' + $(this).data('sliderid')).show();
    }
});

或使用DOM遍历：

$('input[name="periodType"]').change(function() {
    var $sliderDiv = $(this).closest('div').siblings('.layout-slider-slider');
    if(this.checked) {
        $sliderDiv.show();
    }
});