Question

我只与IE8合作。

我有多个复选框，因此我无法为每个复选框编写单独的onchange函数。

这是我试图做的事情

HTML

<input checked type='checkbox' id='check1' onchange = 'checkChange()'>Ch1</input> 
<input checked type='checkbox' id='check2' onchange = 'checkChange()'>Ch2</input>
<input checked type='checkbox' id='check3' onchange = 'checkChange()'>Ch3</input>

JS

function checkChange() {
if ($(this).is(':checked')) {
alert("Box " + $(this).id + " is checked");
}
else {
alert("Box " + $(this).id + " is unchecked");
}
}

它无法正常工作。如何显示一条警告消息，显示已选中或未选中的复选框ID

由于

Answer 1

this与使用on*处理程序时引发事件的元素无关，您需要将其作为参数传递：

<input checked="checked" type="checkbox" id="check1" onchange="checkChange(this)">Ch1
<input checked="checked" type="checkbox" id="check2" onchange="checkChange(this)">Ch2
<input checked="checked" type="checkbox" id="check3" onchange="checkChange(this)">Ch3

然后你可以在你的JS代码中使用它：

function checkChange(that) {
    if ($(that).is(':checked')) {
        alert("Box " + that.id + " is checked");
    }
    else {
        alert("Box " + that.id + " is unchecked");
    }
}

您还可以删除丑陋的属性并使用纯jQuery实现：

<input checked="checked" type="checkbox" id="check1" class="check">Ch1
<input checked="checked" type="checkbox" id="check2" class="check">Ch2
<input checked="checked" type="checkbox" id="check3" class="check">Ch3

$(function() {
    $('.check').change(function() {
        var state = this.checked ? "checked" : "unchecked";
        alert("Box " + this.id + " is " + state);
    });
});

Answer 2

试试这个：

 <input checked type='checkbox' id='check1' onchange='checkChange(this)'>Ch1</input>


function checkChange(cbox) {
    if (cbox.checked == true) {
       ....

Answer 3

不要使用onchange属性。使用JavaScript（jQuery）绑定事件。您可以在所有复选框中添加一个类，以便一次绑定到所有复选框：

<input checked type='checkbox' id='check1' class='checkChange'>Ch1
<input checked type='checkbox' id='check2' class='checkChange'>Ch2
<input checked type='checkbox' id='check3' class='checkChange'>Ch3

<script>
$(function(){
    $('.checkChange').change(function(){
        if ($(this).is(':checked')) {
            alert("Box " + this.id + " is checked");
        }
        else {
            alert("Box " + this.id + " is unchecked");
        }
    });
});
</script>

请注意$(this).id无效。它应该是this.id或$(this).prop('id')。另外，请勿使用</input>。输入没有结束标记。

Answer 4

使用课程：

＆＃13;

function checkChange() {
if ($(this).is(':checked')) {
alert("Box " + this.id + " is checked");
}
else {
alert("Box " + this.id + " is unchecked");
}
}
$(".check").on("click",checkChange)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input checked type='checkbox' id='check1' class=check >Ch1</input> 
<input checked type='checkbox' id='check2' class=check >Ch2</input>
<input checked type='checkbox' id='check3' class=check >Ch3</input>

＆＃13;

如果您不想使用课程，可以根据ID [id^=check]

的开头选择输入

＆＃13;

function checkChange() {
    if ($(this).is(':checked')) {
    alert("Box " + this.id + " is checked");
    }
    else {
    alert("Box " + this.id + " is unchecked");
    }
}
$("[id^=check]").on("click",checkChange)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type=checkbox id=check1 checked>Ch1</input> 
<input type=checkbox id=check2 checked>Ch2</input>
<input type=checkbox id=check3 checked>Ch3</input>

＆＃13;

Answer 5

$('input[type="checkbox"]').on('change', function(){
   if ($(this).is(':checked')) {
      alert("Box " + $(this).id + " is checked");
   }
   else {
      alert("Box " + $(this).id + " is unchecked");
   }
}

Answer 6

传递对自我的引用，然后你可以用它做任何你想做的事。

<input checked="" type="checkbox" id="check1" onchange="checkChange(this)">Ch1 
<input checked="" type="checkbox" id="check2" onchange="checkChange(this)">Ch2
<input checked="" type="checkbox" id="check3" onchange="checkChange(this)">Ch3

function checkChange(bx){  console.log(bx)  }

如何在不使用getElementBy“id”或“name”attr的情况下检查是否选中了复选框？

6 个答案: