Question

我想在点击复选框旁边的标签后发送表单。所以我在下面创建了简单的功能。 Html代码：

 <input class="myinput" type="checkbox" name="photo"id="photo" value="1" />
 <label class="autosend" for="photo">Photos</label>
 <input class="myinput" type="checkbox" name="text"id="photo" value="1" />
 <label class="autosend" for="text">Text</label>

Jquery代码：

 $('.autosend').click(function() {
 $('form#search').submit();
 });

主要问题是 - 点击标签表格后发送，但没有选中复选框。这是为什么？我在我的webbrowser中看到，复选框在发送之前只检查了几秒钟。有没有办法使用上面的这个jquery代码可以检查或取消选中属于特定标签的复选框？

我知道在发送表单之前我可以添加额外的行：

 $(this).prev(".myinput").attr('checked','checked');

但这不是解决方案，因为我需要检查先前的输入是否被检查并且只是切换（在状态检查和未检查之间）。

Answer 1

您可以在复选框的更改事件中发送表单：

$('input[name=text]').on('change', function(){
  $(this).parents('form').submit();
});

Answer 2

$('input:checkbox').change(function() {
 $('form#search').submit();
});

Answer 3

首先，for元素的label属性应设置为相关输入的id。

<input class="myinput" type="checkbox" name="photo" id="photo" value="1" />
<label class="autosend" for="photo">Photos</label>

<input class="myinput" type="checkbox" name="text" id="text" value="1" />
<label class="autosend" for="text">Text</label>

其次，您应该使用change事件来覆盖用户通过键盘输入选择框，并且您还应检查以确保正在检查该框，而不是未选中

$('input:checkbox').change(function() {
    if ($(this).is(":checked")) {
        $('form#search').submit();
    }
});

Example fiddle

Answer 4

问题是for元素的<label>属性对应 ID ，而不是您希望它引用的元素的名称。您的标签和复选框未连接，因此点击标签不会切换复选框。

在发送表单之前切换复选框

4 个答案: