从下拉列表中激活或选中带有onchange事件的复选框

时间:2014-03-28 23:14:15

标签: javascript onchange

Javascript和我永远不会成为最好的朋友。

我尝试通过更改下拉列表中的元素来设置复选框以进行检查。

这是片段

<select name="change_status_to" id="sel">
  <option>....</option>
  <option>....</option>
</select>

<input type="checkbox" name="do_status_change" value="on">

我如何使用Javascript和onchange-event将复选框设置为检查状态?

2 个答案:

答案 0 :(得分:0)

您可以设置其.checked属性:

document.getElementById("do_status_change").checked = true;
document.getElementById("do_status_change").checked = false;

但是,您需要设置id; <{1}}属性是不够的。

> Example <

答案 1 :(得分:0)

以下是 成为javascript朋友的原因示例。

JSFiddle - http://jsfiddle.net/juc7Q/1/

<强> HTML

You're feeling toward Javascript
<select name="friends" id="friends">
    <option value="love">I love JS</option>
    <option value="weird">JS is weird</option>
    <option value="misunderstood">Are we speaking the same language?</option>
</select>

<button id="selectWeird">Keep JS Weird</button>
<div>
    <input type="checkbox" id="we_friends"> - Friends?
</div>

<强>的JavaScript

//Select this using js
var list = document.getElementById('friends');
var cb = document.getElementById('we_friends');

//Add event when change happens
list.onchange = function () {
    var value = list.value;
    if(value == 'love') {
        alert('I knew you would come around');
        cb.setAttribute('checked', '');
    } else if(value == 'weird') {
        alert('And I like being weird :-)!!');
        cb.removeAttribute('checked');
    } else {
        alert('And you think I understand you?');
        cb.removeAttribute('checked');
    }
}

//Change to 'Weird' when I click on it
var btn = document.getElementById('selectWeird');
btn.onclick = function () {
    list.options.selectedIndex = 1;
}