Question

我是javascript新手。我希望能够控制其他复选框中的复选框。我的问题是：

javascript是否具有某种“ this”，我可以用来将clicked元素发送到函数而不必在函数中“获取”？（请参见下面的代码）

此代码有效：

<input type="checkbox" id="checkBox1" onclick="toggleCheckBox('checkBox1', 'checkBox2')">Check Box 1</input>
<input type="checkbox" id="checkBox2">Check Box 2</input>

function toggleCheckBox(checkBox1, checkBox2) {
    var cb1 = document.getElementById(checkBox1);
    var cb2 = document.getElementById(checkBox2);

    if (cb1.checked == true) {
        cb2.checked = true;
    } else {
        cb2.checked = false;
    };
};

这样的东西存在吗？

<input type="checkbox" id="checkBox1" onclick="toggleCheckBox(this, 'checkBox2')">Check Box 1</input>
<input type="checkbox" id="checkBox2">Check Box 2</input>

function toggleCheckBox(checkBox1, checkBox2) {
    var cb2 = document.getElementById(checkBox2);

    if (checkBox1.checked == true) {
        cb2.checked = true;
    } else {
        cb2.checked = false;
    };
};

Answer 1

onclick本身向您的处理函数发送事件。在这种情况下，您可以检查其目标：

<input type="checkbox" id="checkBox1" onclick="toggleCheckBox">Check Box 1</input>
<input type="checkbox" id="checkBox2" onclick="toggleCheckBox">Check Box 2</input>

function toggleCheckBox(e) {
    console.log(e.target);
}

这应该使您入门；然后可以检查e.target以查看它是checkBox1还是checkBox2等。

Answer 2

如果将来需要jQuery。您可以使用此版本。

$.fn.toggleCheckBox = function(e) {
    const nextCheckbox =$(this).data('checkbox-click');
    alert(nextCheckbox);
    $('#'+nextCheckbox).prop('checked', true);
};

$('input[data-checkbox-click]').click(function() {
    $(this).toggleCheckBox();
});

您需要添加此数据属性

data-checkbox-click="checkBox2"

您要收听的地方，单击，然后将相关的#ID设置为值。

http://jsfiddle.net/k80rfe7z/9/

Answer 3

您可以尝试以下方法：

<script>
    function toggleCheckBox(checkBox1) {
        checkBox1.nextElementSibling.checked=checkBox1.checked;
    };
</script>
<input type="checkbox" id="checkBox1" onclick="toggleCheckBox(this)">Check Box 1</input>
<input type="checkbox" id="checkBox2">Check Box 2</input>

check it live

但是，您的答案：

有点“是”！此功能的名称为propagation或bubbling。

此答案支持Two Way效果：

<div onclick="toggleCheckBox(event)">
    <input type="checkbox" id="checkBox1">Check Box 1</input>
    <input type="checkbox" id="checkBox2">Check Box 2</input>
</div>

<script>
    function toggleCheckBox(ev) {
        var t=(window.event||ev).target;
        if(t.tagName.toLowerCase()=="input"){ 
           (t.nextElementSibling||t.previousElementSibling).checked=t.checked;
        };
    };
</script>

提示：最好将输入的标签与此类似（在这种情况下，上面的代码必须以此为基础进行更改）：

<label><input type='checkbox'/> CheckBox1</label>

Answer 4

您拥有的代码有效：

<input type="checkbox" id="checkBox1" onclick="toggleCheckBox(this, 'checkBox2')">Check Box 1</input>
<input type="checkbox" id="checkBox2">Check Box 2</input>

function toggleCheckBox(checkBox1, checkBox2) {
    var cb2 = document.getElementById(checkBox2);

    if (checkBox1.checked == true) {
        cb2.checked = true;
    } else {
        cb2.checked = false;
    };
};

当您的函数被多个对象使用时，将使用this对象，并且该函数仅作用于单个对象。

无需jQuery即可使用“ this”链接复选框检查

4 个答案: