JSFiddle - React, Tailwind, and code Playground

by jun68ykt

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div class="fields" data-required="yes" data-type="radio">
  <label class="radio-inline" for="button1">
    <input name="nanashi" class="a" id="button1" value="item1" checked="checked" type="radio">中身X
  </label>
  <label class="radio-inline" for="button2">
    <input name="nanashi" class="a" id="button2" value="item2" type="radio">中身Y
  </label>
  <label class="radio-inline" for="button3">
    <input name="nanashi" class="a" id="button3" value="item3" type="radio">中身Z
  </label>
  <label class="radio-inline" for="button4">
    <input name="nanashi" class="a" id="button4" value="not-item" type="radio">不明
  </label>
</div>

<div id="output"></div>

JavaScript

var updateState = function() {
  var checkedInput = $("input[name='nanashi']:checked");
  if (/^item[1-3]$/.test(checkedInput.val())) {
    var label = $("label[for=" + checkedInput.attr('id') + "]").text();
    $("#output").text(label + " が選択されています。");
  }
  else
    $("#output").text("予期せぬ値です。");
};
    
$("input[name='nanashi']").click(function () {
　　updateState();
});
    
updateState();