单选按钮不起作用

Question

我的单选按钮无效。它们不可点击......

下面是javascript编码，下面是CSS样式。

input[type=radio], input[type=checkbox] {
    display:none;
  }

input[type=radio] + label, input[type=checkbox] + label {
    display:inline-block;
    margin:-2px;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    color: #333;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255,255,255,0.75);
    vertical-align: middle;
    cursor: pointer;
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
    background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
    background-image: -o-linear-gradient(top,#fff,#e6e6e6);
    background-image: linear-gradient(to bottom,#fff,#e6e6e6);
    background-repeat: repeat-x;
    border: 1px solid #ccc;
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
    border-bottom-color: #b3b3b3;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
  }

   input[type=radio]:checked + label, input[type=checkbox]:checked + label{
       background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
      background-color:#e0e0e0;
  }

<div id="option">
    
    <input type="radio" id="all" name="datesize" value="731" checked="checked"><label for="all">all</label>
    <input type="radio" id="year" name="datesize" value="365"><label for="all">year</label>
    <input type="radio" id="season" name="datesize" value="91"><label for="all">quarter</label>
    <input type="radio" id="month" name="datesize" value="30"><label for="all">month</label>
    <div id="chooseall"></div>
    <div id="chooseyear" style="visibility:hidden">
        <input type="radio" id="yearpick0" name="yearpick" value="0" checked="checked"> 2011 
        <input type="radio" id="yearpick1" name="yearpick" value="1"> 2012
    </div>
    <div id="chooseseason" style="visibility:hidden">
        <input type="radio" id="quarterpick0" name="quarterpick" value="0" checked="checked"> jan-mar 
        <input type="radio" id="quarterpick1" name="quarterpick" value="1"> apr-jun
        <input type="radio" id="quarterpick2" name="quarterpick" value="2"> jul-sep 
        <input type="radio" id="quarterpick3" name="quarterpick" value="3"> oct-dec
    </div>
    <div id="choosemonth" style="visibility:hidden">
        <input type="radio" id="monthpick0" name="monthpick" value="0" checked="checked"> jan 
        <input type="radio" id="monthpick1" name="monthpick" value="1"> feb
        <input type="radio" id="monthpick2" name="monthpick" value="2"> mar 
        <input type="radio" id="monthpick3" name="monthpick" value="3"> apr
        <input type="radio" id="monthpick4" name="monthpick" value="0"> may 
        <input type="radio" id="monthpick5" name="monthpick" value="1"> jun
        <input type="radio" id="monthpick6" name="monthpick" value="2"> jul 
        <input type="radio" id="monthpick7" name="monthpick" value="3"> aug
        <input type="radio" id="monthpick8" name="monthpick" value="0"> sep 
        <input type="radio" id="monthpick9" name="monthpick" value="1"> oct
        <input type="radio" id="monthpick10" name="monthpick" value="10"> nov 
        <input type="radio" id="monthpick11" name="monthpick" value="11"> dec
    </div>

</div>

请查看代码，看看您是否知道问题所在。日Thnx！

Answer 1

您的标签全部映射到错误的ID，将其更改为：

<input type="radio" id="all" name="datesize" value="731" checked="checked"><label for="all">all</label>
<input type="radio" id="year" name="datesize" value="365"><label for="year">year</label>
<input type="radio" id="season" name="datesize" value="91"><label for="season">quarter</label>
<input type="radio" id="month" name="datesize" value="30"><label for="month">month</label>

此外，如果您的输入显示为：none，请检查它是否可以跨浏览器工作，似乎适用于我的Chrome。

如果您使用display none隐藏输入数据，则输入数据也不会作为表单的一部分发送，如果您需要，最好在视觉上隐藏它。

这是工作小提琴： https://jsfiddle.net/kg7b8gb5/1/

Answer 2

for中的label属性应引用id的{​​{1}}属性，如下所示：

input

在更改后看到它在下面工作。

....
     <input type="radio" id="year" name="datesize" value="365"><label for="year">year</label>
....

input[type=radio],
input[type=checkbox] {
  display: none;
}
input[type=radio] + label,
input[type=checkbox] + label {
  display: inline-block;
  margin: -2px;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  color: #333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  cursor: pointer;
  background-color: #f5f5f5;
  background-image: -moz-linear-gradient(top, #fff, #e6e6e6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #fff, #e6e6e6);
  background-image: -o-linear-gradient(top, #fff, #e6e6e6);
  background-image: linear-gradient(to bottom, #fff, #e6e6e6);
  background-repeat: repeat-x;
  border: 1px solid #ccc;
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  border-bottom-color: #b3b3b3;
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
  filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
input[type=radio]:checked + label,
input[type=checkbox]:checked + label {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
  background-color: #e0e0e0;
}

Answer 3

在CSS中你有

input[type=radio], input[type=checkbox] {
    display:none;
  }

隐藏了无线电和复选框，使其无法点击。 看起来您正在自定义广播或复选框，并且您只粘贴了部分代码，或者您不知道代码中有display:none

Answer 4

CSS布局 - 显示属性 display: none; is commonly used with JavaScript to hide and show elements without deleting and recreating them. Take a look at our last example on this page if you want to know how this can be achieved.

删除此css input[type=radio], input[type=checkbox] { display:none; }

了解有关它的更多信息 - http://www.w3schools.com/css/css_display_visibility.asp 元素使用display：none;作为默认值。

https://fiddle.jshell.net/

input[type=radio] + label, input[type=checkbox] + label {
    display:inline-block;
    margin:-2px;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    color: #333;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255,255,255,0.75);
    vertical-align: middle;
    cursor: pointer;
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
    background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
    background-image: -o-linear-gradient(top,#fff,#e6e6e6);
    background-image: linear-gradient(to bottom,#fff,#e6e6e6);
    background-repeat: repeat-x;
    border: 1px solid #ccc;
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
    border-bottom-color: #b3b3b3;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
  }

   input[type=radio]:checked + label, input[type=checkbox]:checked + label{
       background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
      background-color:#e0e0e0;
  }

<div id="option">
    
    <input type="radio" id="all" name="datesize" value="731" checked="checked"><label for="all">all</label>
    <input type="radio" id="year" name="datesize" value="365"><label for="all">year</label>
    <input type="radio" id="season" name="datesize" value="91"><label for="all">quarter</label>
    <input type="radio" id="month" name="datesize" value="30"><label for="all">month</label>
    <div id="chooseall"></div>
    <div id="chooseyear" style="visibility:hidden">
        <input type="radio"id="yearpick0" name="yearpick" value="0" checked="checked"> 2011 
        <input type="radio" id="yearpick1" name="yearpick" value="1"> 2012
    </div>
    <div id="chooseseason" style="visibility:hidden">
        <input type="radio" id="quarterpick0" name="quarterpick" value="0" checked="checked"> jan-mar 
        <input type="radio" id="quarterpick1" name="quarterpick" value="1"> apr-jun
        <input type="radio" id="quarterpick2" name="quarterpick" value="2"> jul-sep 
        <input type="radio" id="quarterpick3" name="quarterpick" value="3"> oct-dec
    </div>
    <div id="choosemonth" style="visibility:hidden">
        <input type="radio" id="monthpick0" name="monthpick" value="0" checked="checked"> jan 
        <input type="radio" id="monthpick1" name="monthpick" value="1"> feb
        <input type="radio" id="monthpick2" name="monthpick" value="2"> mar 
        <input type="radio" id="monthpick3" name="monthpick" value="3"> apr
        <input type="radio" id="monthpick4" name="monthpick" value="0"> may 
        <input type="radio" id="monthpick5" name="monthpick" value="1"> jun
        <input type="radio" id="monthpick6" name="monthpick" value="2"> jul 
        <input type="radio" id="monthpick7" name="monthpick" value="3"> aug
        <input type="radio" id="monthpick8" name="monthpick" value="0"> sep 
        <input type="radio" id="monthpick9" name="monthpick" value="1"> oct
        <input type="radio" id="monthpick10" name="monthpick" value="10"> nov 
        <input type="radio" id="monthpick11" name="monthpick" value="11"> dec
    </div>

</div>

Answer 5

把这个：

<input type="radio" id="all" name="datesize" value="731" checked="checked"><label for="all">all</label>
<input type="radio" id="year" name="datesize" value="365"><label for="year">year</label>
<input type="radio" id="season" name="datesize" value="91"><label for="season">season</label>
<input type="radio" id="month" name="datesize" value="30"><label for="month">month</label>

Answer 6

而不是display:none。添加了以下css

input[type=radio], input[type=checkbox] {
    position: absolute;
    width: 40px;
    height: 30px;
    opacity: 0;
  }

input[type=radio], input[type=checkbox] {
    position: absolute;
    width: 40px;
    height: 30px;
    opacity: 0;
  }

input[type=radio] + label, input[type=checkbox] + label {
    display:inline-block;
    margin:-2px;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    color: #333;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255,255,255,0.75);
    vertical-align: middle;
    cursor: pointer;
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
    background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
    background-image: -o-linear-gradient(top,#fff,#e6e6e6);
    background-image: linear-gradient(to bottom,#fff,#e6e6e6);
    background-repeat: repeat-x;
    border: 1px solid #ccc;
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
    border-bottom-color: #b3b3b3;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
  }

   input[type=radio]:checked + label, input[type=checkbox]:checked + label{
       background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
      background-color:#e0e0e0;
  }

<div id="option">
    
    <input type="radio" id="all" name="datesize" value="731" checked="checked"><label for="all">all</label>
    <input type="radio" id="year" name="datesize" value="365"><label for="all">year</label>
    <input type="radio" id="season" name="datesize" value="91"><label for="all">quarter</label>
    <input type="radio" id="month" name="datesize" value="30"><label for="all">month</label>
    <div id="chooseall"></div>
    <div id="chooseyear" style="visibility:hidden">
        <input type="radio" id="yearpick0" name="yearpick" value="0" checked="checked"> 2011 
        <input type="radio" id="yearpick1" name="yearpick" value="1"> 2012
    </div>
    <div id="chooseseason" style="visibility:hidden">
        <input type="radio" id="quarterpick0" name="quarterpick" value="0" checked="checked"> jan-mar 
        <input type="radio" id="quarterpick1" name="quarterpick" value="1"> apr-jun
        <input type="radio" id="quarterpick2" name="quarterpick" value="2"> jul-sep 
        <input type="radio" id="quarterpick3" name="quarterpick" value="3"> oct-dec
    </div>
    <div id="choosemonth" style="visibility:hidden">
        <input type="radio" id="monthpick0" name="monthpick" value="0" checked="checked"> jan 
        <input type="radio" id="monthpick1" name="monthpick" value="1"> feb
        <input type="radio" id="monthpick2" name="monthpick" value="2"> mar 
        <input type="radio" id="monthpick3" name="monthpick" value="3"> apr
        <input type="radio" id="monthpick4" name="monthpick" value="0"> may 
        <input type="radio" id="monthpick5" name="monthpick" value="1"> jun
        <input type="radio" id="monthpick6" name="monthpick" value="2"> jul 
        <input type="radio" id="monthpick7" name="monthpick" value="3"> aug
        <input type="radio" id="monthpick8" name="monthpick" value="0"> sep 
        <input type="radio" id="monthpick9" name="monthpick" value="1"> oct
        <input type="radio" id="monthpick10" name="monthpick" value="10"> nov 
        <input type="radio" id="monthpick11" name="monthpick" value="11"> dec
    </div>

</div>