Question

我正在尝试检查所有复选框并更改按钮的名称。但是未选中复选框。这是我试图实现的代码。

function js_select_all(btn){
    var tf = "on";

    if (btn.value == "Check All") {
        for (var i=0 ; i < document.formMassCheckIn.circSelected.length ; i++) {
            alert("check1");
            if(!(document.formMassCheckIn.circSelected[i].checked)) {
                alert("check2");
                document.formMassCheckIn.circSelected.checked = tf;
            }
        }
        btn.value ="Uncheck All";
    } else {
        for (var i=0 ; i < document.formMassCheckIn.circSelected.length ; i++) {
            alert("check3");
            if (!(document.formMassCheckIn.circSelected[i].checked)){
                alert("check4");
                document.formMassCheckIn.circSelected.checked = "";
            }
        }
        btn.value = "Check All";
        tf = "";
    } 
}

Answer 1

使用

document.formMassCheckIn.circSelected[i].checked = true;

用于选中复选框

和

document.formMassCheckIn.circSelected[i].checked = false;

取消选中

Answer 2

您可以轻松完成，请查看以下代码

var button = document.querySelector('.btn');
button.addEventListener('click', () => {
  // Button Value
  (button.value == "check All") ? button.value = "uncheck All": button.value = "check All";

  // Checkbox
  var checkboxes = document.querySelectorAll('input[type=checkbox]');
  [].forEach.call(checkboxes, (checkbox) => {
    if (checkbox.checked)
      checkbox.removeAttribute('checked');
    else
      checkbox.setAttribute('checked', 'checked');
  });
});

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

<input type="button" class="btn" value="check All">

Answer 3

您已经错过了索引[i]，并且您应该使用true/false check/uncheck复选框：

document.formMassCheckIn.circSelected[i].checked = true;
//And
document.formMassCheckIn.circSelected[i].checked = false;

此外，您不应在!的第二个条件中添加逻辑NOT Uncheck All运算符：

if (document.formMassCheckIn.circSelected[i].checked)

而不是：

if (!(document.formMassCheckIn.circSelected[i].checked)){

或者它永远不会到达。

希望这有帮助。

＆＃13;

function js_select_all(btn){
  if (btn.value == "Check All") 
  {
    for (var i=0 ; i < document.formMassCheckIn.circSelected.length ; i++) {
      if(!document.formMassCheckIn.circSelected[i].checked)
        document.formMassCheckIn.circSelected[i].checked = true;
      
    }
    btn.value ="Uncheck All";
  } else 
  {
    for (var i=0 ; i < document.formMassCheckIn.circSelected.length ; i++) {
      if (document.formMassCheckIn.circSelected[i].checked)
        document.formMassCheckIn.circSelected[i].checked = false;
    }
    btn.value = "Check All";
  } 
}

＆＃13;

<form name='formMassCheckIn'>
  <input type='checkbox' name='circSelected' /> Option 1
  <br>
  <input type='checkbox' name='circSelected' /> Option 2
  <br>
  <input type='checkbox' name='circSelected' /> Option 3
  <br><br> 
  <input type='button' value='Check All' onclick='js_select_all(this)'/> 
</form>

＆＃13;

Answer 4

我认为之前的帖子已经涵盖了答案。

我想指出你的问题本身就包含了答案。

if(!(document.formMassCheckIn.circSelected[i].checked))

您正在检查上述if语句中的boolean。但是在if块中，您将字符串设置为复选框的 checked 属性。

Answer 5

你在功能上犯了一些错误。一切都很好。我已经重写了你的功能，做了同样的事情，也切断了一些不需要的代码。

function js_select_all(btn) {
    if (btn.value == "Check All") {
       for (var i = 0 ; i < document.formMassCheckIn.circSelected.length ; i++) {
           document.formMassCheckIn.circSelected[i].checked = true;
       }

       btn.value = "Uncheck All";
    } else {
        for (var i = 0 ; i < document.formMassCheckIn.circSelected.length ; i++) {
            document.formMassCheckIn.circSelected[i].checked = false;
        }

        btn.value = "Check All";
    } 
}

单击按钮检查所有复选框

5 个答案: