Question

在我的HTML文档中，我想要9个复选框。选中复选框后，我想要显示相应的文本块。我正在尝试为此创建一个单独的函数，它使用一个参数来选择相应的框，但到目前为止我已经不成功了。我对jQuery的HTML没有经验，所以我不知道问题是什么。

我目前的代码如下：

$(document).ready(function() {
    for ($i = 0; $i < 9; $i++) {
        $("input[name=checkbox" + $i + "]").click(function () {
            $('#box' + $i).toggle();
        });
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox1" value="alpha"> Checkbox 1 <br>
<input type="checkbox" name="checkbox2" value="beta"> Checkbox 2 <br>

<div id = "box1" style="display:none">Checkbox 1 is selected</div>
<div id = "box2" style="display:none">Checkbox 2 is selected</div>

任何人都可以帮助我理解.toggle无法正常工作的原因吗？

Answer 1

$(document).ready(function() {
$("input[type='checkbox']").click(function(){
  alert("Checkbox "+$(this).index()+" is selected!");
 });
});

使用像这样的循环是不可行的。使用＆＃34;这个＆＃34;选择器以获取当前单击的复选框，并在所有复选框上应用单击功能。

<强>更新您正在申请循环到9个复选框，这意味着您在DOM中添加了9次类似的代码，这是不必要的。如果您不希望它们用于其他复选框，则将类应用于所需的复选框并按类访问。 index（＆＃34; .checkbox_class＆＃34;）将为您提供仅来自类复选框的复选框索引。它不会计算<br>之间的标签：）

 $(document).ready(function() {
    $(".checkbox_class").click(function(){
      alert("Checkbox "+$(this).index(".checkbox_class")+" is selected!");
     });
    });

Answer 2

由于Consul，您的切换实际上定位#box9，因为这是$i的最后一个值。幸运的是，在这种情况下，根本不需要循环。

我们可以使用how variable scoping works in for loops将处理程序应用于所有复选框。从那里，我们可以通过抓取它的名称并从中删除“复选框”一词来获取所点击的复选框的编号。

然后我们可以简单地将该数字附加到"#box"以选择要切换的相应元素。

$("input[name^=checkbox]").click(function () {
    //$(this) refers to the checkbox that was clicked
    var num = $(this).attr("name").replace("checkbox","");
    var $box = $("#box" + num);
    $box.toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox1" value="alpha"> Checkbox 1 <br>
<input type="checkbox" name="checkbox2" value="beta"> Checkbox 2 <br>

<div id = "box1" style="display:none">Checkbox 1 is selected</div>
<div id = "box2" style="display:none">Checkbox 2 is selected</div>

如果您有name="checkboxX"的其他复选框，希望将其应用于...

...你需要将它们分成几组，最简单的方法就是将一个类应用到你想要的类中。

<input type="checkbox" name="checkbox1" class="clickable" />
<input type="checkbox" name="checkbox2" class="clickable" />
<input type="checkbox" name="checkbox3" />

然后只需替换上面提供的代码中的选择器，只定位那些具有类clickable的选择器：

$("input[type=checkbox].clickable").click(function () {
    //...
});

在此示例中，checkbox3不会触发该事件，因为它没有应用该类。

Answer 3

您正在寻找的是jQuery this，它可用于获取当前元素的点击。假设所有复选框都有类＆＃34;复选框＆＃34;。所有方框都有＃34;框＆＃34;。您可以使用.index()获取点击.checkbox的索引，并找到具有相同索引的.box。那么你所要做的就是.toggle()它。

＆＃13;

$('.checkbox').click(function() {
  var index_number = $('.checkbox').index(this);
  $('.box').eq(index_number).toggle();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="checkbox" class="checkbox"> Checkbox 1<br>
<input type="checkbox" class="checkbox"> Checkbox 2<br>

<div style="display:none" class="box">Checkbox 1 is selected</div>
<div style="display:none" class="box">Checkbox 2 is selected</div>

＆＃13;

Answer 4

我不确定问题是什么。在jQuery中.each（）内置并且比for循环更好，所以让我们使用它。

$(document).ready(function() {
  $("input[type=checkbox]").each(function(index) {
    $("input[name=checkbox" + (index + 1) + "]").click(function() {
      $("#box" + (index + 1)).toggle()
    })
  })
});

所以让我们首先从顶部开始，我们选择所有具有复选框类型并为每个匹配元素执行函数的输入，它还为我们提供了一些数据＆＃34; index＆＃34;从0开始上升。

然后我们获取所有匹配的元素，这些元素是带有复选框名称的输入，复选框后的数字将从1开始，到2时结束，因为我们在索引中加1。当您单击其中一个输入时，我们将调用一个新函数，选择具有正确数字的框（再次使用索引+ 1，因此我们不会从0开始）并切换它。

Answer 5

For中I条件的问题是因为没有比较值。通过制作数组来确定你拥有多少钱的最简单方法是：

var
   id = ['box1', 'box2'], //repeat til you get to 9
   checkbox = ['checkbox1', 'checkbox2'], //repeat til you get to 9
   frame = ""
;


for (i = 0; i < id.length; i++){
   frame +=
       "<div id=' " + box[i] + " '>"+
       checkbox[i] + "is selected</div>"
   ;
}

document.getElementById('demo').innerHTML = frame;

然后你的单独脚本文件（因为它不能在同一个文件中工作!!!）

//your toggle events here
$('#alpha').toggle(function{
     $('#box1').show(0);
     $('#box2, #box3, #box4, #box5, #box6, #box7, #box8, #box9').hide(0);
});
//repeat til you get to 9

我的克隆结果经验来自小提琴： https://fiddle.jshell.net/NitroXAce/d1qro5g3/15/

因为我试图让面板做某些事情，但保留了一个＆＃39;模板。在您的示例中，您只需克隆输入并显示无div。快乐狩猎！

如何从变量

5 个答案: