ラジオボタンにはlabelタグのforが便利 - safariが対応していない場合 2007/11/26 2007/12/09

Zopeジャンキー日記 :ラジオボタンにはlabelタグのforが便利

わざわざラジオボタンをクリックしないですむのはやはり便利ですね。

safariがこの機能に対応していないようなので、調べたら、javascriptを使用してこの機能を使う方法がありました。

Add Label Click Support to Safari: Chris Cassell Dot Net

コードは下記のような感じです。
※このコードはAdd Label Click Support to Safari: Chris Cassell Dot Netにあったものです。

function init(){
if (navigator.userAgent.indexOf("Safari") > 0) {
var labels = document.getElementsByTagName('label');
for (i=0; i< labels.length; i++) { labels[i].addEventListener("click",addLabelFocus,false); }
}
}

function addLabelFocus(){
var item = document.getElementById(this.getAttribute("for"));
item.focus();
if (item.getAttribute("type") == "text") {
item.value = item.value;
} else if (item.getAttribute("type") == "checkbox") {
if (!item["checked"]) {
item["checked"] = true;
} else {
item["checked"] = false;
}
} else if (item.getAttribute("type") == "radio") {
var allInputs = document.getElementsByTagName("input");
var radios = new Array();
for (i = 0; i < allInputs.length; i++) {
if (allInputs[i].getAttribute("name") == item.getAttribute("name")) {
radios.push(allInputs[i]);
}
}
for (i = 0; i < radios.length; i++) {
if (radios[i]["checked"] && radios[i].getAttribute("id") != item.getAttribute("id")) {
radios[i]["checked"] = false;
}
}
item["checked"] = true;
}
}