Question

我正在使用ASP.net来创建一个带有多个复选框和一个提交按钮的程序，该按钮会根据所选的复选框启动操作。

但是，我的一个复选框应该像这个提交按钮一样，即，在选中/取消选中此复选框时，必须触发与按钮相同的操作。有人可以帮我做这个（或者可能指导我一个教程）

我有一个控制器类和模型。

谢谢你

EDIT 该计划如下：

@using(Html.BeginForm("controllername", FormMethod.Get)) {
     @html.CheckBox("check1");
     @HTMl.Checkbos("check2");
     <input type="submit" value="Submit" />
}

其他所有内容都在控制器中处理。

Answer 1

您可以使用javascript来收听复选框的检查事件，然后调用表单提交。

假设您的视图标记是这样的

<form id="yourFormId" action="user/post">
  <input type="checkbox" class="optionChk" value="1" /> One
  <input type="checkbox" class="optionChk" value="2" /> Two
  <input type="checkbox" class="optionChk" value="3" /> Three
</form>
<script type="text/javascript">
  $(function(){
    $(".optionChk").click(function(){
      var item=$(this);
      if(item.val()=="2")   //check your condition here
      {
         item.closest("form").submit();
      }
    });
  });
</script>

编辑：根据问题编辑。

更改CheckBox Helper方法用法，如下所示，将css类添加到复选框，以便我们可以将其用于jQuery选择。

 @Html.CheckBox("check1",new { @class="optionChk"})

Answer 2

想象你有这样的事情：

@using(Html.BeginForm()) {

  <label class="checkbox">
    <input type="checkbox" name="chb_a" id="chb_a"> Option A
  </label>
  <label class="checkbox">
    <input type="checkbox" name="chb_b" id="chb_b"> Option B
  </label>
  <label class="checkbox">
    <input type="checkbox" name="chb_c" id="chb_c"> Option C
  </label>
  <label class="checkbox">
    <input type="checkbox" name="chb_d" id="chb_d"> Option D
  </label>

  <button type="submit" class="btn">Submit</button>

}

你可以写一个简单的jQuery来补充：

$(".submit").click(function() {
  // find the <form> the element belongs and submit it
  $(this).closest('form').submit();
});

如果您希望他们提交

，您只需要在任何复选框或更多按钮中添加名为submit的课程。

例如：

  <label class="checkbox">
    <input type="checkbox" name="chb_e" id="chb_e" class="submit"> Option E
  </label>

Answer 3

您可以在复选框上绑定点击事件。

$( '.myCheckboxes' ).click(function () {
  var clickedBox = $( this );
  // now do something based on the clicked box...
});

如果您需要知道选中了哪个复选框，那只是另一个选择器。

$( '.myCheckboxes:checked' ).each(function () {
  // Now you have access to each checked box.
  // Maybe you want to grab their values.
});

只需将复选框绑定到点击事件即可。假设您有一种唯一标识提交表单的复选框的方法。

$( '#formSubmitCheckbox' ).click(function() {
  $( '#myForm' ).submit();
});

没有提交按钮的ASP MVC3复选框操作

3 个答案: