画像、テキスト、チェックボックスを含むいくつかのボックスがあります。
<label name="skill" id="testbox" class="box tooltip" onclick="toggleCheckbox('test');" style="background-image:url('red.png')">
<span><img class="callout" src="callout.png"><script>document.write (test);</script></span>
<div class="margin">
<img src="">
test<input name="choice" value="1" id="test" type="checkbox" onchange="onCheckboxChanged(); checkTotal();" disabled>
</div>
ラベル内の任意の場所をクリックして id (testbox) を取得し、この関数で使用しようとしました。
var onCheckboxChanged = function(checkbox){
var test = document.getElementById('test');
var testbox = document.getElementById('testbox');
var structure = document.getElementById('structure');
var structurebox = document.getElementById('structurebox');
if(structure.checked){
test.disabled = false;
structurebox.style.backgroundImage='url(green.png)';
}
else{
test.disabled = true;
structurebox.style.backgroundImage='url(grey.png)';
}
if(test.disabled){
testbox.style.backgroundImage='url(red.png)';
}
else {
if(test.checked){
testbox.style.backgroundImage='url(green.png)';
}
else{
testbox.style.backgroundImage='url(grey.png)';
}
}
};
コードをコピーして貼り付けて ID を変更するだけで済みますが、70 個以上のボックスがあり、さらに多くなるでしょう。私は試した:
document.getElementsByName("skill")[0].getAttribute('id')
しかし、おそらく「スキル」という名前のボックスからすべてのIDを取得します。これに似たものを使用する必要があると思いますが、機能しますが、コードに接続する方法がわからないため、この関数からクリックされた ID を関数で使用できます (var が最適であるため)。