How to check a checkbox onkeypress?

I have the following code to check a checkbox as soon as the开发者_Python百科 user types something in the textbox. This works fine for a single text box.

function activateCheckbox() {
        if (document.myForm.box1.checked == false) {
            document.myForm.box1.checked = true;
        }
    }
    <tr>
        <td><input type="text" id="mySearch1" name="mySearch1" size="40" onkeypress="activateCheckbox()"/></td>
        <td><input type="checkBox" id="box1" name="box1"/></td>
    </tr>

However suppose there are more than one text boxes with a checkbox against each one and I want that only the corresponding checkbox should be checked. I modified the above code as shown below by passing a parameter to the function but it's not working, because "document.myForm.id.checked" doesn't work as it accepts the checkbox name instead of "id". Please suggest if there are better alternatives or how do I modify my code to make it working?

function activateCheckbox(id) {
        if (document.myForm.id.checked == false) {
            document.myForm.id.checked = true;
        }
    }
    <tr>
        <td><input type="text" id="mySearch1" name="mySearch1" size="40" onkeypress="activateCheckbox('box1')"/></td>
        <td><input type="checkBox" id="box1" name="box1"/></td>
    </tr>
    <tr>
        <td><input type="text" id="mySearch2" name="mySearch2" size="40" onkeypress="activateCheckbox('box2')"/></td>
        <td><input type="checkBox" id="box2" name="box2"/></td>
    </tr>
    <tr>
        <td><input type="text" id="mySearch3" name="mySearch3" size="40" onkeypress="activateCheckbox('box3')"/></td>
        <td><input type="checkBox" id="box3" name="box3"/></td>
    </tr>

You have a couple of options. You can do:

function activateCheckbox(id) {
    if (document.myForm[id].checked == false) {
        document.myForm[id].checked = true;
    }
}

...or personally, I think this is a bit more clear:

function activateCheckbox(id) {
    var checkbox = document.getElementById(id);
    if (! checkbox.checked) {
        checkbox.checked = true;
    }
}

The first approach works because in JavaScript obj.someProperty means the same semantically as obj["someProperty"]. So if you have a variable that stores the name of the property you want to access, you can always do obj[name] to access the property.

The second approach is just finding the checkbox in the DOM by its id. It seems cleaner to me, since you are setting the id of each checkbox anyways and since you called your variable "id".

Also note that your if statement is superfluous. The checked attribute will only ever be true or false (you can subvert this by storing other things there, but that's a completely separate topic). So setting it to true whenever it is false is logically equivalent to always setting it to true, and you can implement your handler function with a single line, like:

function activateCheckbox(id) {
    document.getElementById(id).checked = true;
}

.id means literally the id property. In case you want to have it set dynamically, use the [] notation:

function activateCheckbox(id) {
        if (document.myForm[id].checked == false) {
            document.myForm[id].checked = true;
        }
    }

['test'] means .test, ['abc'] means .abc. So [id] means: access the property that id has as its value.

I advise you to use a JQuery (www.jquery.com). By adding one code line

<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script> 

you can solve your problem problem by write just one code line:

$('#checkboxId').attr('checked','checked');

or you can check

$('input[type="checkbox"]').attr('checked','checked');

or unckeck

$('input[type="checkbox"]').attr('checked','');

all checkboxes in you document