Skip to content

Instantly share code, notes, and snippets.

@redamoon redamoon/index.html

Created Sep 11, 2017
Embed
What would you like to do?
switch label
<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>
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']
});
<script src="https://code.jquery.com/jquery-1.8.3.js"></script>
.visibilityHidden {
visibility: hidden;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.