switch label

index.html

<div class="js-switch">
  <ul>
    <li>
      <input name="radio" class="radio" type="radio" id="radio01" value="" data-radio=".change01" checked>
      <label for="radio01">switch01</label>
    </li>
    <li>
      <input name="radio" class="radio" type="radio" id="radio02" value="" data-radio=".change02">
      <label for="radio02">switch02</label>
    </li>
    <li>
    <input name="radio" class="radio" type="radio" id="radio03" value="" data-radio=".change03">
      <label for="radio03">switch03</label>
    </li>
    <li>
    <input name="radio" class="radio" type="radio" id="radio04" value="" data-radio=".change04">
      <label for="radio04">switch04</label>
    </li>
  </ul>
  <dl>
    <dt>
      <label for="select01" class="label01 label">label01</label>
    </dt>
    <dd>
      <select name="select01" id="select01" class="select">
        <option value="テスト01">テスト01</option>
        <option value="テスト02">テスト02</option>
        <option value="テスト03">テスト03</option>
      </select>
    </dd>
  </dl>
  <dl>
    <dt>
      <label for="select02" class="label02 label">label02</label>
    </dt>
    <dd>
      <select name="select02" id="select02" class="select">
        <option value="テスト01">テスト01</option>
        <option value="テスト02">テスト02</option>
        <option value="テスト03">テスト03</option>
      </select>
    </dd>
  </dl>
  <dl>
    <dt>
      <label for="select03" class="label03 label">label03</label>
    </dt>
    <dd>
      <select name="select03" id="select03" class="select">
        <option value="テスト01">テスト01</option>
        <option value="テスト02">テスト02</option>
        <option value="テスト03">テスト03</option>
      </select>
    </dd>
  </dl>
  <dl>
    <dt>
      <label for="select03" class="label03 label">label04</label>
    </dt>
    <dd>
      <select name="select04" id="select04" class="select">
        <option value="テスト01">テスト01</option>
        <option value="テスト02">テスト02</option>
        <option value="テスト03">テスト03</option>
      </select>
    </dd>
  </dl>
</div>

script.js

var REDAMOON = REDAMOON || {};
REDAMOON.ChangeLabel = function(config) {
  this.config = config;
};
REDAMOON.ChangeLabel.prototype = {
  onChange : function(config) {
    var dataRadio = 'data-radio';
    var $inputRadio = $(config.inputRadioClass);
    var $label = $(config.labelClass);
    var $select = $(config.selectClass);
    $label.each(function(i){
      $label.eq(i).html(config.arrayText[0][i]);
      $select.eq(i).attr({
        'id': config.arrayID[0][i],
        'name': config.arrayID[0][i]
      });
      if (config.ariaHidden[0] === 'true') {
        $label.attr('aria-hidden', config.ariaHidden[0]);
        $label.addClass(config.visibilityHidden);
      } else {
        $label.attr('aria-hidden', config.ariaHidden[0]);
        $label.removeClass(config.visibilityHidden);
      }
    });
    $inputRadio.on('click', function() {
      var index = $inputRadio.index(this);
      $label.each(function(i) {
        $label.eq(i).html(config.arrayText[index][i]);
        $label.eq(i).attr('for', config.arrayID[index][i]);
        $select.eq(i).attr({
          'id': config.arrayID[index][i],
          'name': config.arrayID[index][i]
        });
        if (config.ariaHidden[index] === 'true') {
          $label.attr('aria-hidden', config.ariaHidden[index]);
          $label.addClass(config.visibilityHidden);
        } else {
          $label.attr('aria-hidden', config.ariaHidden[index]);
          $label.removeClass(config.visibilityHidden);
        }
      });
    });
  }
}
var cl = new REDAMOON.ChangeLabel();
cl.onChange({
  'inputRadioClass': '.js-switch .radio',  // inputのClass名
  'labelClass': '.label',  // ラベルのClass名
  'selectClass': '.select',  // セレクトのClass名
  'visibilityHidden': 'visibilityHidden',  // 非表示要素
  'arrayText': [
    ['radio01 label01', 'radio01 label02', 'radio01 label03', 'radio01 label04'],
    ['radio02 label01', 'radio02 label02', 'radio02 label03', 'radio02 label04'],
    ['radio03 label01', 'radio03 label02', 'radio03 label03', 'radio03 label04'],
    ['radio04 label01', 'radio04 label02', 'radio04 label03', 'radio04 label04']
  ],
  'arrayID': [
    ['select01', 'select02', 'select03', 'select04'],
    ['select01', 'select04', 'select03', 'select03'],
    ['select01', 'select04', 'select03', 'select03'],
    ['select01', 'select01', 'select02', 'select05']
  ],
  'ariaHidden': ['true', 'false', 'false', 'true']
});

scripts

<script src="https://code.jquery.com/jquery-1.8.3.js"></script>

style.css

.visibilityHidden {
  visibility: hidden;
}

switch-label.markdown

switch label

A Pen by redamoon on CodePen.

License.