如何獲取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

您可以在您的表單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/