PDA

View Full Version : Select checkbox using its label


lux
01-11-2007, 02:30 PM
Hey people,

Just a quick question: How do you select a checkbox by clicking on its label text?

Its a ease of use question really as i want the user to be able to select either the checkbox itself or its accompaning label.

Cheers

domedia
01-11-2007, 03:09 PM
Wrap a LABEL around the whole thing, and set the FOR attribute to match the INPUT ID attribute:
<label for="check1"><input type="checkbox" id="check1">Check 1</label>

davidj
01-11-2007, 03:18 PM
do it in a JS function

<a href="#" onClick="checkit()">label</a>
<input type="checkbox" id="checkbox" name="checkbox" value="checkbox" />

function checkit(){

a = document.getElementById('checkbox');

if(a.checked == true){

a.checked = false;

}else{

a.checked = true;

}

}

lux
01-11-2007, 03:32 PM
cool cheers!

lux
01-12-2007, 08:49 AM
I've following domedia on this one because each of my checkboxes have differnet names (each one represents a different column name in a db table):


<li><label for="common"><input type="checkbox" id="common" name="common">common</label></li>
<li><label for="simplex"><input type="checkbox" id="simplex" name="simplex">simplex</label></li>
<li><label for="duplex"><input type="checkbox" id="duplex" name="duplex">duplex</label></li>
<li><label for="print"><input type="checkbox" id="print" name="print">print</label></li>


I would like to have either text or a button that you can click that will highlight all of the checkboxes. How would you suggest i achieve this? The difficulty i see is that all the checkboxes have different names.

cheers guys!

davidj
01-12-2007, 09:02 AM
<a href="#" onClick="checkit('checkbox1')">label</a>
<input type="checkbox" id="checkbox1" name="checkbox" value="checkbox" />

<a href="#" onClick="checkit('checkbox2')">label</a>
<input type="checkbox" id="checkbox2" name="checkbox" value="checkbox" />

<a href="#" onClick="checkit('checkbox3')">label</a>
<input type="checkbox" id="checkbox3" name="checkbox" value="checkbox" />

function checkit(id){

a = document.getElementById(id);

if(a.checked == true){

a.checked = false;

}else{

a.checked = true;

}

}

lux
01-12-2007, 10:42 AM
cheers davidj,

i found a similar function which did use getElementByTagName() and changed it to:


function checkAll(master){
var checked = master.checked;
var col = document.getElementsByName("checkbox");
for (var i=0;i<col.length;i++) {
col[i].checked= checked;
}
}


Parent

<input type="checkbox" onclick="checkAll(this)"> - Select All -

Child

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

davidj
01-12-2007, 10:44 AM
mines more atractive to the ladies

lux
01-12-2007, 11:37 AM
through beer goggles maybe! haha