如何在 jquery 对话框中获取表单中的复选框值？答案

【问题标题】：how to get checkbox values in form in jquery dialog?如何在 jquery 对话框中获取表单中的复选框值？
【发布时间】：2012-07-03 15:30:35
【问题描述】：

我在 jquery 对话中有一个表单。提交表单后如何获取选中复选框的值？

$(document).ready(function(){

var $dialog = $('<div></div>')
    .html('<form id="myform" action=""><input type="checkbox"   id="completeCheck" name="completeCheck" value="" />Complete check<br /><input type="checkbox" name="view" value="Car" /> View report <br /><input type="checkbox" name="consist" value="" />Consistency check<br /><input type="checkbox" name="other" value="" />Other checks<br /><input type="checkbox" name="keyCheck" value="" />Key check<br /><input type="checkbox" name="compareCheck" value="" />Compare check<br /></form>')
    .dialog({
        autoOpen: false,
        title: 'Data check',
        buttons: {
          "Submit Form": function() {  $('form#myform').submit();},
          "Cancel": function() {$(this).dialog("close");}
        }
    });

$('#createNew').click(function() {
    $dialog.dialog('open');
    // prevent the default action, e.g., following a link
    return false;
});

$('form#myform').submit(function(){

  $dialog.dialog('close');
});        


});

【问题讨论】：

标签： jquery forms checkbox dialog

【解决方案1】：

工作演示 http://jsfiddle.net/9mZAJ/2/ 或 http://jsfiddle.net/9mZAJ/1/

$('#completeCheck').is(':checked') 将与.each 一起在复选框休息处循环看到演示和下面的代码。

这应该会有所帮助

现在要遍历所有复选框，您可以使用.each 和is(":checked") 检查以多种方式执行此操作。 :)

代码

$(document).ready(function(){

var $dialog = $('<div></div>')
    .html('<form id="myform" action=""><input type="checkbox"   id="completeCheck" name="completeCheck" value="" />Complete check<br /><input type="checkbox" name="view" value="Car" /> View report <br /><input type="checkbox" name="consist" value="" />Consistency check<br /><input type="checkbox" name="other" value="" />Other checks<br /><input type="checkbox" name="keyCheck" value="" />Key check<br /><input type="checkbox" name="compareCheck" value="" />Compare check<br /></form>')
    .dialog({
        autoOpen: false,
        title: 'Data check',
        buttons: {
          "Submit Form": function() {  $('form#myform').submit();},
          "Cancel": function() {$(this).dialog("close");}
        }
    });

$('#createNew').click(function() {
    $dialog.dialog('open');
    // prevent the default action, e.g., following a link
    return false;
});

$('form#myform').submit(function(){
    alert('completeCheck checkobox is checked or not ==> ' + $('#completeCheck').is(':checked'));

  $dialog.dialog('close');
});        


});

这样循环

$(this).find('input[type="checkbox"]').each(function(){
    alert($(this).is(':checked'));
})

图片

【讨论】：

@user840930 很高兴我能帮上忙，cheerios！ :)

【解决方案2】：

您可以在表单提交回调中使用$(this).find(":checked") 获取所有选中的复选框。然后，您可以遍历它们并获取它们的值。

这是一个示例，说明如何将选中的复选框的名称及其值存储在一个数组中：

$('form#myform').submit(function(){
  // Store names of the checkboxes and their values in an array
  var values = []; 
  $(this).find(":checked").each(function () {
     values[$(this).prop("name")] = $(this).val();
  });
  $dialog.dialog('close');
});

【讨论】：

@Tats_innit OP 想要“在提交表单后获取所选复选框的值？”，而不是检查是否选中了某个复选框。

【解决方案3】：

在您的提交功能中：

$(this).find(':checkbox').each(function(){
    if(this.checked)
        alert(this.name + ' is checked');
    else
        alert(this.name + ' is not checked');
});

见http://jsfiddle.net/tricki/mwJqR/2/

【讨论】：

顺便说一句，您可以使用this.checked 代替$(this).is(':checked')。节省不必要的函数调用。