单击复选框会将输入更改为CSS

Question

我在列表上放置了复选框。当您点击任何复选框时，属于它的输入框会变为不可见状态。我使用了以下JavaScript函数，但它没有起作用：

我的JS函数：

function ActivePassive() {

    var list = document.getElementsByClassName("switchery");

    for (var i = 0; i < list.length; i++) {
        if (liste[i].checked) {
            console.log("aa"); // if checked = true, it write aa.
            document.getElementById("focus").style.display = 'block'; //but it doesn't work
            }
        else {
            console.log("bb"); // if checked = false, it write bb.
            document.getElementById("focus").style.display = 'none'; //but it doesn't work
            }
    }
}

我的HTML代码：

        <td>
             <div class="form-group">
                <div class="col-md-10">
                   <div class="checkbox checkbox-switchery">
                       <label>
                    @Html.CheckBoxFor(modelItem => Model[i].status, new {  @class = "switchery" , @onchange = "ActivePassive()" })
                  <label class="label-rounded bg-blue-300">
                      Yes/No
                        </label>
                    </label>
                  </div>
             </div>
          </div>
      </td>


 <td>
      <div id="focus" class="col-md-4">
            <div class="form-group has-feedback has-feedback-left">
                     @Html.EditorFor(modelItem => Model[i].Value, new { htmlAttributes = new { @class = "form-control" } })
                       @Html.ValidationMessageFor(modelItem => Model[i].Value, "", new { @class = "text-danger" })
                  </div>
            </div>
       </td>

- Mary

---

"但它没有。" 没有什么？ - Calvin Nunes

请勿在评论区添加代码，将信息添加到您的问题中，使用 [编辑]。 - Calvin Nunes

在你的函数中，你有一个 if (liste[i].checked) { 的条件语句，但是你所定义的变量名为 list，而不是 liste[i]，因此会报错。 - Simpson

这段代码 document.getElementById("focus"). 将始终检索相同的项目。假设您的代码在循环内部，您应该确保您的ID是唯一的。 - Canica

@Mary，如果您已经解决了问题，请将其作为答案编写并接受它。这将标记您的问题已得到解答。 - jmag

Answer 1

您需要更新代码，以便正确引用要切换显示的项目，并从复选框中构建对其的引用。是的，有很多方法可以解决这个问题，但以下尝试可帮助OP最小化重构。

更新您的复选框，包括一个包含索引的属性：

@Html.CheckBoxFor(modelItem => Model[i].status, new {  @class = "switchery" , @onchange = "ActivePassive(event)", data_chkbox_index = i })

将元素ID更新为包含索引，这可以确保ID是唯一的：

<div id="focus-@i">

更新您的函数，使用实际的目标复选框（无需循环所有）并仅在特定元素上更新显示：

function ActivePassive(event) {
    //this is the actual clicked item
    var chkbox = event.target;
    //get the index from the checkbox
    var index = chkbox.getAttribute('data-chkbox-index');
    //determine what display value to set based off the checkbox
    var display = chkbox.checked? 'block' : 'none';

    //finally set the display value referencing the element ID with the index
    document.getElementById("focus-" + index).style.display = display;
}

HTH

- Canica

---

“@data-chkbox-index” 未定义。 这里给出的是变量名吗？ - Mary

and "event.target;" undefined - Mary

Answer 2

更新：问题已解决 我捕获了我所选复选框的索引值。我找到了我在id旁边输入的索引值。我使用了我在脚本中编写的相同函数。 我是这样解决的

function ActivePassive() {

    var list = document.getElementsByClassName("switchery");

    for (var i = 0; i < list.length; i++) {
        if (liste[i].checked) {

            document.getElementById("focus-i").style.display = 'block';  // here
            }
        else {
            document.getElementById("focus-i").style.display = 'none'; //here
            }
    }
}

 <div id="focus-@i" class="col-md-4"> *// get i value*
            <div class="form-group has-feedback has-feedback-left">
                     @Html.EditorFor(modelItem => Model[i].Value, new { htmlAttributes = new { @class = "form-control" } })
                       @Html.ValidationMessageFor(modelItem => Model[i].Value, "", new { @class = "text-danger" })
                  </div>
            </div>
       </td>

- Mary