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

Question

我在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');
});        


});

Answer 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'));
})

图片

Answer 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');
});

Answer 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/