JS函数检查所有复选框，不需要答案

【问题标题】：JS Function Checks all Checkboxes, which is not neededJS函数检查所有复选框，不需要
【发布时间】：2015-10-09 15:16:41
【问题描述】：

对不起，标题很奇怪。所以，我正在使用 Visual Studio MVC，我正在创建一个网站。我在引导程序中有 5 行，每行 30 个按钮。当您单击这些按钮时，会弹出一个带有复选框的模式。单击复选框时，它会使模态按钮变为红色。不幸的是，它会检查每个按钮和每个模式的所有复选框。我有一种感觉是因为 id 或其他原因，但我无法更改每个按钮的每个 id，因为我正在创建 150 多个按钮。因此，单击复选框时，我只需要 1 个按钮即可更改颜色。我添加了 jsfiddle，以获得更简单的视图。感谢您的所有帮助。

这与我创建的另一个帖子有关：Link

JSFiddle：Fiddle Link

到目前为止我有：

@{int k= 0;}
@for (int j = 0; j < 5; j++) { 
    @for (int i = 0; i < 30; i++)
    {
        k = k + 1;

    }
}

第二个 for 循环内部是：

<button id="btn1" type="button" class="btn btn-primary btn-xs gridbtn" data-toggle="modal" data-target="#myModal">@k</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">@(k)</h4>
     </div>
     <div class="modal-body">
       <form role="form">
         <div class="checkbox callback-to-button">
           <label><input type="checkbox"> Remember me</label>
         </div>
         <button type="submit" class="btn btn-default" data-dismiss="modal">Submit</button>
       </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

您确实应该更好地识别您的按钮...不仅所有按钮都带有id="btn1" 无效的html，它还使执行此类任务变得不必要地过于复杂。由于该代码处于循环中，为什么不能将迭代器附加到它，所以 id 是“btn”+ k。您的复选框可以效仿，因此您知道如果有人单击复选框 #30，您会更改 btn30 的颜色。
@king14nyr 刚刚尝试过，但没有成功。

标签： javascript twitter-bootstrap visual-studio button checkbox

【解决方案1】：

由于您已经在循环，您可以轻松地为每个实例关联一个动态 id。

<button id="btn@k" type="button" class="btn btn-primary btn-xs gridbtn" data-toggle="modal" data-target="#myModal@k">@k</button>
<!-- Modal -->
<div class="modal fade" id="myModal@k" role="dialog">
  <div class="modal-dialog">
  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">@(k)</h4>
     </div>
     <div class="modal-body">
       <form role="form">
         <div class="checkbox callback-to-button">
           <label><input type="checkbox" data-target="#btn@k"> Remember me</label>
         </div>
         <button type="submit" class="btn btn-default" data-dismiss="modal">Submit</button>
       </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

为 div 设置事件侦听器是个坏主意，您可以在复选框本身上设置更改事件侦听器，如果您在上面的 HTML 中清楚地看到，我已将 data-target 属性添加到复选框。

请参考以下Javascript：

$('.modal input[type="checkbox"]').change(function(){
 var target = $(this).attr('data-target');

 $(target).css({'background':'red'});
});

【讨论】：

不幸的是，这似乎不起作用。我收到有关模态 ID 的语法错误。所以我在 myModal @k 之间放了一个空格。语法错误消失了，但现在模式根本没有弹出
你得到的错误是什么？它一定是一些模板渲染问题，它没有按预期分配 id。你能提供你得到的错误和一个带有按钮的模式的呈现 HTML 吗？
错误：0x800a139e - JavaScript 运行时错误：语法错误，无法识别的表达式：#myModal@k
好的，所以变量 k 的值不会呈现到视图中，对吧？所以我需要更好地了解你的实际循环是如何的。尝试，替换我提供给@i 的html 示例中的所有@k。再次请给出实际呈现的 HTML 的小提琴。
我认为这只是语法。我不认为它会让我这样做。 i 循环仅经过 30 次。我无法在 jsfiddle 中正确地将 C# 语言转换为 html，所以我无法以这种方式向您展示。有其他网站可以使用吗？

【解决方案2】：

对于所有的混乱，我很抱歉，但实际上我的模态没有唯一的 id，所以 for 循环的第一个模态被创建了 150 次。

我只需将 @(k) 放入模态 ID。

<div class="modal fade" id="myModal-@(k)" tabindex="-1" role="dialog">

现在效果惊人！这个帖子有帮助：Link

感谢大家的帮助！

【讨论】：