HTML

Question

好的，首先我有这样的代码

    <input type="checkbox" class="css-checkbox" id="test1">
<input type="checkbox" class="css-checkbox" id="test2">
<input type="checkbox" class="css-checkbox" id="test3">
<input type="checkbox" class="css-checkbox" id="test4">

现在我修改成这样

<input type="checkbox" class="css-checkbox" id="test1" onclick="myFunction()">
<input type="checkbox" class="css-checkbox" id="test2" onclick="myFunction()">
<input type="checkbox" class="css-checkbox" id="test3" onclick="myFunction()">
<input type="checkbox" class="css-checkbox" id="test4" onclick="myFunction()">

这是我的函数

function myFunction() {
  var testArr = ["test1", "test2"];
  for (var i = 0; i < testArr.length; i++) {
    var checkBox = document.getElementById(testArr[i].value);
    if (checkBox.checked == true){
    Materialize.toast('I am a toast!', 4000)
  } 
}
}

我想做什么？

我试图显示notice/Dialog materialize.toast检查带有ID test1或test2的复选框时显示的。并且在选择 test3 或 test4 时不执行任何操作。我希望任何人都可以帮助我。

Answer 1

您可以尝试使用以下代码，它会对您有所帮助。

function myFunction(id) {
var c = document.getElementById(id);
if((id=='test1' || id=='test2') && c.checked)
{
 Materialize.toast('I am a toast!', 4000)
}

}

Answer 2

这一行有问题 var checkBox = document.getElementById(testArr[i].value);

必须是

var checkBox = document.getElementById(testArr[i]).value;

也知道复选框是否被选中，不需要获取它的值

document.getElementById(testArr[i]).checked

将 return 复选框状态

Answer 3

var checkBox = document.getElementById(testArr[i]);

这应该可以解决您的问题。

Answer 4

function myFunction() {
    debugger;
  var testArr = ["test1", "test2"];
  for (var i = 0; i < testArr.length; i++) {
    var checkBox = document.getElementById(testArr[i]);
    if (checkBox.checked == true){
    alert('I am a toast!');
  } 
}
}

从 document.getElementById(testArr[i]).value 中删除值对我有用

或者您可以使用以下函数直接检查复选框是否被选中

function myFunction() {
    debugger;
  var testArr = ["test1", "test2"];
  for (var i = 0; i < testArr.length; i++) {
    var flag = document.getElementById(testArr[i]).checked;
    if (flag){
    alert('I am a toast!');
  } 
}
}

Answer 5

我相信以下就是您要找的。

首先，在checkbox中使用的function中添加this作为参数，这样就可以触发点击checkbox

然后在函数中检查点击的checkbox是否被选中，并且有特殊的id，然后做任何你想做的事

function myFunction(e) {
  var testArr = ["test1", "test2"];
  
  var chkId = $(e).attr("id");
  if (e.checked == true && testArr.indexOf(chkId) !== -1) {
    console.log("Materialize goes here!"); //Materialize.toast('I am a toast!', 4000)
  } 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="css-checkbox" id="test1" onclick="myFunction(this)">
<input type="checkbox" class="css-checkbox" id="test2" onclick="myFunction(this)">
<input type="checkbox" class="css-checkbox" id="test3" onclick="myFunction(this)">
<input type="checkbox" class="css-checkbox" id="test4" onclick="myFunction(this)">

HTML - Javascript 检查中

HTML - Javascript on check

javascript

checkbox

selection

material-design