Как поставить галочку на кнопочном прессе?

Question

У меня есть следующий код, чтобы установить флажок, как только пользователь введет что-то в текстовое поле. Это прекрасно работает для одного текстового поля.

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>

Однако предположим, что существует более одного текстового поля с флажком напротив каждого, и я хочу, чтобы был установлен только соответствующий флажок. Я изменил приведенный выше код, как показано ниже, передав параметр в функцию, но он не работает, потому что «document.myForm.id.checked» не работает, так как принимает имя флажка вместо «id». Пожалуйста, предложите, если есть лучшие альтернативы или как мне изменить мой код, чтобы он работал?

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>

Answer 1

У вас есть несколько вариантов.Вы можете сделать:

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

... или лично, я думаю, это немного яснее:

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

Первый подход работает, потому что в JavaScript obj.someProperty означает то же самоесемантически как obj["someProperty"].Поэтому, если у вас есть переменная, в которой хранится имя свойства, к которому вы хотите получить доступ, вы всегда можете сделать obj[name] для доступа к свойству.

Второй подход - просто найти флажок в DOM по его id.Это кажется мне чище, так как вы все равно устанавливаете id каждого флажка и поскольку вы называете свою переменную "id".

Также обратите внимание, что ваш оператор if является излишним.Атрибут checked всегда будет true или false (вы можете испортить это, сохранив там другие вещи, но это совершенно отдельная тема).Поэтому установка его на true, когда он равен false, логически эквивалентна всегда установке на true, и вы можете реализовать свою функцию-обработчик в одну строку, например:

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

Answer 2

.id буквально означает свойство id.Если вы хотите, чтобы он был установлен динамически, используйте запись []:

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

['test'] означает .test, ['abc'] означает .abc.Итак, [id] означает: получить доступ к свойству, которое id имеет в качестве значения.

Answer 3

Я советую вам использовать JQuery (www.jquery.com).Добавив одну строку кода

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

, вы можете решить свою проблему, написав всего одну строку кода:

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

или вы можете проверить

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

илиснимите

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

все флажки в вашем документе