html - style - jquery checkbox




如何通過單擊文本標籤來切換複選框? (6)

使用標籤包裝仍然不允許點擊“框中的任何位置” - 仍然只是在文本上! 這對我有用:

<div onclick="dob.checked=!dob.checked" class="checkbox"><input onclick="checked=!checked" id="dob" type="checkbox"/>Date of birth entry must be completed</div>

但不幸的是有很多javascript有效地切換兩次。

HTML表單中的Checkboxes沒有隱式標籤 。 在其旁邊添加顯式標籤(某些文本)不會切換checkbox

如何通過單擊文本標籤來切換複選框?


如果您正確標記HTML代碼,則無需使用javascript。 以下代碼將允許用戶單擊標籤文本以勾選複選框。

<label for="surname">Surname</label>
<input type="checkbox" name="surname" id="surname" />

label元素的for屬性鏈接到input元素的id屬性,瀏覽器完成剩下的工作。

這一直在測試工作:

  • IE6
  • IE7
  • 火狐

您可以將復選框包裝在標籤中:

<label style="display: block; padding: 50px 0 0 50px; background-color: pink; width: 80px; height: 80px">
  <input type="checkbox" name="surname">
</label>

您需要將復選框包裝在label標籤中,就像這樣

 <label style="height: 10px; width: 150px; display: block; ">
  [Checkbox Label Here] <input type="checkbox"/>
 </label>

FIDDLE

或者您也可以使用標籤的for屬性和您的複選框的ID ,如下所示

<label for="other">Other Details</label>
<input type="checkbox" id="other" />

FIDDLE


羅尼,

如果要將標籤文本和復選框括在包裝元素中,可以執行以下操作:

<label for="surname">
    Surname
    <input type="checkbox" name="surname" id="surname" />
</label>

這應該工作:

<script>
function checkbox () {
    var check = document.getElementById("myCheck").checked;
    var box = document.getElementById("myCheck")

    if (check == true) {
        box.checked = false;
    }
    else if (check == false) {
        box.checked = true;
    }
}
</script>
<input type="checkbox"><p id="myCheck" onClick="checkbox();">checkbox</p>

如果它沒有,請求我的核心!





checkbox