如何在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和with 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

您可以在表單submit-callback中使用$(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/