Question

这个无线电输入是通过jQuery中的AJAX调用从PHP附加的。每次用户单击按钮时，都会从PHP代码中添加一个无线电。无线电输入在未设置样式时工作正常。当我尝试使用这种风格时，他们会停止切换。我想问题是div，但我不确定。

.h_tick {
    margin-left: 1px;
    margin-top: 0;
    float: left;
    height: 35px;
    width: calc(14.28% - 1.85px);
    width: -webkit-calc(14.28% - 1.85px);
    width: -moz-calc(14.28% - 1.85px);
    background-color: #eee;
    border-radius: 0px;
    text-align: center;
    line-height: 35px;
    font-size: 18px;
    font-weight: bold;
    color: #333;
}    
.tc {
    line-height: 35px;
    text-align: center;
    height: 35px;
}    
label.tick {
    color: ;
    text-align: center;
}    
input.tick {
    display: none;
    float: left;
}    
input.tick[type=radio] + label.tick div.tc {
    color: #fff;
    background-color: ;
    border-radius: 3px;
}    
input.tick[type="radio"]:checked + label.tick div.tc:after {
    content: '✔';
    color: #09ad7e;
}

<div class="h_tick">
    <input class="tick" type="radio" id="tk" value=""/>
    <label class="tick" for="tk">
        <div class="tc" style=""></div>
    </label>
</div>
<div class="h_tick">
    <input class="tick" type="radio" id="tk" value=""/>
    <label class="tick" for="tk">
        <div class="tc" style=""></div>
    </label>
</div>

Answer 1

您所看到的行为是设计的。只有在其位置选择了同名的另一台无线电时，才能取消选择无线电输入。如果要打开/关闭收音机，请使用复选框。

请注意，如果您正在使用多个无线电输入但只想允许其中一个选择（其目的），那么您需要为它们指定相同的名称并删除id属性防止重复。

这是一个有效的例子：

.h_tick {
    margin-left: 1px;
    margin-top: 0;
    float: left;
    height: 35px;
    width: calc(14.28% - 1.85px);
    width: -webkit-calc(14.28% - 1.85px);
    width: -moz-calc(14.28% - 1.85px);
    background-color: #eee;
    border-radius: 0px;
    text-align: center;
    line-height: 35px;
    font-size: 18px;
    font-weight: bold;
    color: #333;
}    
.tc {
    line-height: 35px;
    text-align: center;
    height: 35px;
}    
label.tick {
    text-align: center;
}    
input.tick {
    display: none;
    float: left;
}    
label.tick div.tc {
    color: #fff;
    border-radius: 3px;
}    
input.tick[type="radio"]:checked + div.tc:after {
    content: '✔';
    color: #09ad7e;
}

<div class="h_tick">
    <label class="tick">
        <input class="tick" type="radio" value="" name="foo" />
        <div class="tc"></div>
    </label>
</div>
<div class="h_tick">
    <label class="tick">
        <input class="tick" type="radio" value="" name="foo" />
        <div class="tc"></div>
    </label>
</div>
<div class="h_tick">
    <label class="tick">
        <input class="tick" type="radio" value="" name="foo" />
        <div class="tc"></div>
    </label>
</div>

Answer 2

我真的不明白你的问题是什么：

在你当前的例子中，只有一个单选按钮，所以没有任何意义：单击单独未选中单选按钮将被检查，再次单击时将保持检查
我们一放第二个，假设重要条件我们给它相同的name，一切正常

请看这个说明上述内容的片段。

.h_tick {
  margin-left: 1px;
  margin-top: 0;
  float: left;
  height: 35px;
  width: calc(14.28% - 1.85px);
  width: -webkit-calc(14.28% - 1.85px);
  width: -moz-calc(14.28% - 1.85px);
  background-color: #eee;
  border-radius: 0px;
  text-align: center;
  line-height: 35px;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}
.tc {
  line-height: 35px;
  text-align: center;
  height: 35px;
}
label.tick {
  color:;
  text-align: center;
}
input.tick {
 /* display: none;*/
  float: left;

}
input.tick[type=radio] + label.tick div.tc {
  color: #fff;
  background-color:;
  border-radius: 3px;
}
input.tick[type="radio"]:checked + label.tick div.tc:after{  
  content: '✔';
  color: #09ad7e;
}

<div class="h_tick">
  <input class="tick" type="radio" id="tk1" name="tk" value=""/>
  <label class="tick" for="tk">
    <div class="tc" style="">
    </div>
  </label>
</div>
<div class="h_tick">
  <input class="tick" type="radio" id="tk2" name="tk" value=""/>
  <label class="tick" for="tk">
    <div class="tc" style="">
    </div>
  </label>
</div>

请注意，两个单选按钮不仅有共同的name，而且相反，它们必须有不同的id。

附加多个样式的单选按钮

2 个答案: