單選按鈕代碼在 firefox 中正常，但在其他瀏覽器中不起作用

Question

給定的代碼適用於 firefox，但不適用於任何其他瀏覽器。

我是不是用單選按鈕搞錯了

我只想要 3 個按鈕，但樣式和我已經一樣，當用戶單擊一個選項時，它會突出顯示

這是我的代碼：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title></title>
</head>
<style>
.radio > input[type=radio]{
  display:none;
  visibility:hidden;
}
input[type=radio] + label{
  cursor:pointer;
}
input[type=radio]:checked + label{
  background-color:green;
}

.but1{
    background-color:#009;
    color:#FFF;
    border:none;
    border-radius:15px;
    width:200px;
    height:50px;
    font-size:18px;
    font-weight:bold;
    border-radius:15px;
    text-align:center;
    padding:8px;
    font-family:Verdana, Geneva, sans-serif;
    float:left;
    margin-left:10px;
}
</style>
</head>

<body>
<form action="Untitled2.php" method="post">
<label class="radio" for="fb1">
    <input id="fb1" type="radio" name="time" value="all day" checked />
    <label class="but1">Available<br>All day</label>
  </label>

  <label class="radio" for="fb2">
    <input id="fb2" type="radio" name="time" value="between 8-12"/>
    <label class="but1">Between<br>8am - 12am</label>
  </label>

  <label class="radio" for="fb3">
     <input id="fb3" type="radio" name="time" value="between 12-4" />
    <label class="but1">Between<br>12pm - 4pm</label>
  </label>

<input name="submit" type="submit" />
</form>
</body>
</html>

我怎樣才能做到這一點？

Answer 1

您的外部label是多余的，您可以這樣做：

<input id="fb1" type="radio" name="time" value="all day" checked />
<label class="but1" for="fb1">Available<br>All day</label>

<input id="fb2" type="radio" name="time" value="between 8-12"/>
<label class="but1" for="fb2">Between<br>8am - 12am</label>

<input id="fb3" type="radio" name="time" value="between 12-4" />
<label class="but1" for="fb3">Between<br>12pm - 4pm</label>

隱藏單選按鈕的 ZC7A628CBA22E28EB17B5F5C6AE2A266AZ 也是錯誤的，應該是：

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

小提琴

Answer 2

已更新，請查看 url

使用 jQuery 正如你提到的 http://jsfiddle.net/VE9Tf/4/

<label class="radio" for="fb1">
    <input id="fb1" type="radio" name="time" value="all day" checked />
    <span class="but1 active">Available<br>All day</span>
  </label>

  <label class="radio" for="fb2">
    <input id="fb2"  type="radio" name="time" value="between 8-12"/>
    <span class="but1">Between<br>8am - 12am</span>
  </label>

  <label class="radio" for="fb3">
    <input id="fb3" type="radio" name="time" value="between 12-4" />
    <span class="but1">Between<br>12pm - 4pm</span>
  </label>

單選按鈕代碼在 firefox 中正常，但在其他瀏覽器中不起作用

問題描述

2 個解決方案

解決方案1
2 2014-03-19 05:07:45

解決方案2
0 2014-03-19 05:12:03

單選按鈕代碼在 firefox 中正常，但在其他瀏覽器中不起作用

問題描述

2 個解決方案

解決方案1 2 2014-03-19 05:07:45

解決方案2 0 2014-03-19 05:12:03

解決方案1
2 2014-03-19 05:07:45

解決方案2
0 2014-03-19 05:12:03