SO-51690227

by David Thomas

HTML

<form>
  <fieldset>
    <legend>All the labels</legend>
    <fieldset>
      <legend>One</legend>
      <label for="a">a</label>
      <label for="b">b</label>
      <label for="c">c</label>
      <label for="d">d</label>
      <label for="e">e</label>
      <label for="f">f</label>
    </fieldset>
    <fieldset>
      <legend>Two</legend>
      <label for="g">g</label>
      <label for="h">h</label>
      <label for="i">i</label>
      <label for="j">j</label>
      <label for="k">k</label>
      <label for="l">l</label>
    </fieldset>
  </fieldset>
  <fieldset>
    <legend>Group 1</legend>
    <input class="iput" type="checkbox" name="E33" value="33" stock="20" id="a">
    <input class="iput" type="checkbox" name="E34" value="33" stock="6" id="b">
    <input class="iput" type="checkbox" name="E646" value="33" stock="7" id="c">
    <input class="iput" type="checkbox" name="E46" value="33" stock="7" id="d">
    <input class="iput" type="checkbox" name="E626" value="33" stock="7" id="e">
    <input class="iput" type="checkbox" name="E656" value="33" stock="7" id="f">

    <div class="a"> Hello </div>
    <div class="b"> BYE </div>
  </fieldset>
  <fieldset>
    <legend>Group 2</legend>
    <input class="iput" type="checkbox" name="E33" value="33" stock="20" id="g">
    <input class="iput" type="checkbox" name="E34" value="33" stock="6" id="h">
    <input class="iput" type="checkbox" name="E646" value="33" stock="7" id="i">
    <input class="iput" type="checkbox" name="E46" value="33" stock="7" id="j">
    <input class="iput" type="checkbox" name="E626" value="33" stock="7" id="k">
    <input class="iput" type="checkbox" name="E656" value="33" stock="7" id="l">

    <div class="a"> Hello </div>
    <div class="b"> BYE </div>
  </fieldset>
</form>

CSS

label {
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  text-align: center;
  line-height: 1.4em;
  box-shadow: 0 0 0 1px #000;
  border-radius: 0.2em;
  cursor: pointer;
  margin: 0 0.2em;
}

div.a,
input:checked~div.a {
  display: block;
}

div.b,
input:checked~input:checked~div.a {
  display: none;
}

input:checked~input:checked~div.b {
  display: block;
}