单选按钮组选择更改另一个组而不是当前组

时间：2016-02-19 11:29:01

标签： css css3

我在将单选按钮设置为4选项滑块时遇到问题。我可以使用一个，但不能使用多个滑块。抱歉，如果我遗漏了一些明显的东西，我想我会在这里盲目编码。

当使用多组单选按钮时，单击第2，第3等组时，只有第一组不断更改，而不是更改的实际组。

我可以通过硬编码ID来修复它，即am-1，am-2等，但这意味着编写css达到固定数量。如果可能的话，我希望尽量做到无限制。

还有其他的CSS，但这是它的选择部分：

.switch-four-stage .switch-input:checked + switch-label
{
  /* Styling */
  font-weight: bold;
  color: rgba(255, 255, 255, 1.00);
  -webkit-transition: 0.15s ease-out;
  -moz-transition: 0.15s ease-out;
  -ms-transition: 0.15s ease-out;
  -o-transition: 0.15s ease-out;
  -webkit-transition-property: color, text-shadow;
  -moz-transition-property: color, text-shadow;
  -ms-transition-property: color, text-shadow;
  -o-transition-property: color, text-shadow;
}
.switch-four-stage .switch-input:checked + .switch-label-am ~ .switch-selection
{
  left: 0px;
}
.switch-four-stage .switch-input:checked + .switch-label-all ~ .switch-selection {
  left: 60px;
}
.switch-four-stage .switch-input:checked + .switch-label-pm ~ .switch-selection {
  left: 120px;
}
.switch-four-stage .switch-input:checked + .switch-label-na ~ .switch-selection {
  left: 180px;
}

然后这是标记：

<section style="float: left;">Day 1</section>
<section class="switch-four-stage">
    <div class="switch switch-pink">
        <input type="radio" class="switch-input" id="am" name="day1" value="1" checked>
        <label for="am" class="switch-label switch-label-am">AM</label>
        <input type="radio" class="switch-input" id="all" name="day1" value="2">
        <label for="all" class="switch-label switch-label-all">ALL</label>
        <input type="radio" class="switch-input" id="pm" name="day1" value="3">
        <label for="pm" class="switch-label switch-label-pm">PM</label>
        <input type="radio" class="switch-input" id="na" name="day1" value="4">
        <label for="na" class="switch-label switch-label-na">N/A</label>
        <span class="switch-selection"></span>
    </div>
</section>
<div style="clear: left;"></div>
<section style="float: left;">Day 2</section>
<section class="switch-four-stage">
    <div class="switch switch-pink">
        <input type="radio" class="switch-input" id="am" name="day2" value="1" checked>
        <label for="am" class="switch-label switch-label-am">AM</label>
        <input type="radio" class="switch-input" id="all" name="day2" value="2">
        <label for="all" class="switch-label switch-label-all">ALL</label>
        <input type="radio" class="switch-input" id="pm" name="day2" value="3">
        <label for="pm" class="switch-label switch-label-pm">PM</label>
        <input type="radio" class="switch-input" id="na" name="day2" value="4">
        <label for="na" class="switch-label switch-label-na">N/A</label>
        <span class="switch-selection"></span>
    </div>
</section>
<div style="clear: left;"></div>
<section style="float: left;">Day 3</section>
<section class="switch-four-stage">
    <div class="switch switch-pink">
        <input type="radio" class="switch-input" id="am" name="day3" value="1" checked>
        <label for="am" class="switch-label switch-label-am">AM</label>
        <input type="radio" class="switch-input" id="all" name="day3" value="2">
        <label for="all" class="switch-label switch-label-all">ALL</label>
        <input type="radio" class="switch-input" id="pm" name="day3" value="3">
        <label for="pm" class="switch-label switch-label-pm">PM</label>
        <input type="radio" class="switch-input" id="na" name="day3" value="4">
        <label for="na" class="switch-label switch-label-na">N/A</label>
        <span class="switch-selection"></span>
    </div>
</section>
<div style="clear: left;"></div>

我还包括输出的屏幕截图： Multiple slider output

想知道是否有人有任何建议？我希望这是有道理的，如果不是的话，我会尽可能地更好地澄清它。

非常感谢提前。

2 个答案:

答案 0 :(得分：1)

您不能在同一页面上再次使用相同的ID。 ID应该与HTML文档唯一。尝试更改第二组和第三组单选按钮的ID，例如：

<div class="switch switch-pink">
    <input type="radio" class="switch-input" id="am-2" name="day2" value="1" checked>
    <label for="am-2" class="switch-label switch-label-am">AM</label>
    <input type="radio" class="switch-input" id="all-2" name="day2" value="2">
    <label for="all-2" class="switch-label switch-label-all">ALL</label>
    <input type="radio" class="switch-input" id="pm-2" name="day2" value="3">
    <label for="pm-2" class="switch-label switch-label-pm">PM</label>
    <input type="radio" class="switch-input" id="na-2" name="day2" value="4">
    <label for="na-2" class="switch-label switch-label-na">N/A</label>
    <span class="switch-selection"></span>
</div>

答案 1 :(得分：0)

立即检查我更改了不同输入和标签的ids和for的值。检查当地工作正常。

<html>
        <head>
            <style>
                .switch-four-stage .switch-input:checked + switch-label
                {
                  /* Styling */
                  font-weight: bold;
                  color: rgba(255, 255, 255, 1.00);
                  -webkit-transition: 0.15s ease-out;
                  -moz-transition: 0.15s ease-out;
                  -ms-transition: 0.15s ease-out;
                  -o-transition: 0.15s ease-out;
                  -webkit-transition-property: color, text-shadow;
                  -moz-transition-property: color, text-shadow;
                  -ms-transition-property: color, text-shadow;
                  -o-transition-property: color, text-shadow;
                }
                .switch-four-stage .switch-input:checked + .switch-label-am ~ .switch-selection
                {
                  left: 0px;
                }
                .switch-four-stage .switch-input:checked + .switch-label-all ~ .switch-selection {
                  left: 60px;
                }
                .switch-four-stage .switch-input:checked + .switch-label-pm ~ .switch-selection {
                  left: 120px;
                }
                .switch-four-stage .switch-input:checked + .switch-label-na ~ .switch-selection {
                  left: 180px;
                }   
            </style>
        </head>
        <body>
            <section style="float: left;">Day 1</section>
            <section class="switch-four-stage">
                <div class="switch switch-pink">
                    <input type="radio" class="switch-input" id="am" name="day1" value="1" checked>
                    <label for="am" class="switch-label switch-label-am">AM</label>
                    <input type="radio" class="switch-input" id="all" name="day1" value="2">
                    <label for="all" class="switch-label switch-label-all">ALL</label>
                    <input type="radio" class="switch-input" id="pm" name="day1" value="3">
                    <label for="pm" class="switch-label switch-label-pm">PM</label>
                    <input type="radio" class="switch-input" id="na" name="day1" value="4">
                    <label for="na" class="switch-label switch-label-na">N/A</label>
                    <span class="switch-selection"></span>
                </div>
            </section>
            <div style="clear: left;"></div>
            <section style="float: left;">Day 2</section>
            <section class="switch-four-stage">
                <div class="switch switch-pink">
                    <input type="radio" class="switch-input" id="am1" name="day2" value="1" checked>
                    <label for="am1" class="switch-label switch-label-am">AM</label>
                    <input type="radio" class="switch-input" id="all1" name="day2" value="2">
                    <label for="all1" class="switch-label switch-label-all">ALL</label>
                    <input type="radio" class="switch-input" id="pm1" name="day2" value="3">
                    <label for="pm1" class="switch-label switch-label-pm">PM</label>
                    <input type="radio" class="switch-input" id="na1" name="day2" value="4">
                    <label for="na1" class="switch-label switch-label-na">N/A</label>
                    <span class="switch-selection"></span>
                </div>
            </section>
            <div style="clear: left;"></div>
            <section style="float: left;">Day 3</section>
            <section class="switch-four-stage">
                <div class="switch switch-pink">
                    <input type="radio" class="switch-input" id="am2" name="day3" value="1" checked>
                    <label for="am2" class="switch-label switch-label-am">AM</label>
                    <input type="radio" class="switch-input" id="all2" name="day3" value="2">
                    <label for="all2" class="switch-label switch-label-all">ALL</label>
                    <input type="radio" class="switch-input" id="pm2" name="day3" value="3">
                    <label for="pm2" class="switch-label switch-label-pm">PM</label>
                    <input type="radio" class="switch-input" id="na2" name="day3" value="4">
                    <label for="na2" class="switch-label switch-label-na">N/A</label>
                    <span class="switch-selection"></span>
                </div>
            </section>
            <div style="clear: left;"></div>
        </body>
    </html>
相关问题
最新问题