JS函数检查所有的复选框，这是不需要的

JS Function Checks all Checkboxes, which is not needed

本文关键字：不需要 复选框 JS 检查 函数      更新时间：2023-09-26

抱歉，标题很奇怪。所以，我正在使用Visual Studio MVC，我正在创建一个网站。我有5行30个按钮在引导。当你点击这些按钮时，会弹出一个带有复选框的模式。当复选框被单击时，它使模态按钮变为红色。不幸的是，它会检查每个按钮和每个模式的所有复选框。我有一种感觉，这是因为id或其他原因，但我不能为每个按钮更改每个id，因为我创建了超过150个按钮。所以我只需要一个按钮来改变颜色时，复选框被点击。我已经添加了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。

<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，所以for循环的第一个模态被创建了150次。

我只需要在模态id中加上@(k)。

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

现在工作惊人!这篇文章有帮助:Link

谢谢你的帮助!

相关文章：