Wie mache ich ein Optionsfeld in Jquery UI?

Question

Wie kann ich das Kontrollkästchen ein Optionsfeld? Ich möchte ein Optionsfeld vor By buffer und By polygon hinzufügen.

dialog1.empty(); 
var header = $('<h5></h5>').text('By buffer'); 
var toggleBtn = $('<button><i id="toggle-icon" class="fa fa-circle"></i></button>').attr('id', 'toggle-buffer-btn').attr('class', 'btn btn-default btn-sm');      
var inputRadius = $('<input type="text"/>').attr('id', 'radius').attr('class', 'btn btn-default btn-sm').attr('disabled', 'disabled'); 
var helpLabel = $('<span id="help-label">Click and drag mouse to create buffer</span>'); 
var polyBufferChkbx = $('<input type="checkbox">').attr('id', 'polygon-buffer'); 
var polyBufferLabel = $('<span id="polygon-buffer-label"> &nbsp By polygon</span>'); 
var val; 

dialog1.append(header); 
dialog1.append(toggleBtn); 
dialog1.append(inputRadius); 
dialog1.append(helpLabel); 
dialog1.append('<br/>'); 
dialog1.append('<br/>'); 
dialog1.append(polyBufferChkbx); 
dialog1.append(polyBufferLabel); 

Answer 1

Wenn Sie jQuery UI verwenden werden, warum es Ihnen nicht helfen lassen.

Beispiel: https://jsfiddle.net/Twisty/wfqv3orm/

HTML

<div id="dialog1"> 
</div> 

JavaScript

$(function() { 
    var dialog1 = $("#dialog1"); 
    dialog1.empty(); 
    var header = $("<h5>", { 
    class: "dialog-header" 
    }).text("By buffer").appendTo(dialog1); 
    $("<button>", { 
    id: "toggle-buffer-btn", 
    class: "btn btn-default btn-sm" 
    }).appendTo(dialog1); 
    dialog1.find("button").append($("<i>", { 
    id: "toggle-icon", 
    class: "fa fa-circle" 
    })); 
    $("<input>", { 
    type: "text", 
    id: "radius", 
    class: 'btn btn-default btn-sm' 
    }).prop('disabled', true).appendTo(dialog1); 
    $("<span>", { 
    id: "help-label", 
    style: "margin-bottom: 2em;" 
    }).html("Click and drag mouse to create buffer").appendTo(dialog1); 
    $("<input>", { 
    type: "checkbox", 
    id: 'polygon-buffer' 
    }).appendTo(dialog1); 
    $("<label>", { 
    id: "polygon-buffer-label", 
    for: "polygon-buffer" 
    }).html("By polygon").appendTo(dialog1); 
    dialog1.controlgroup(); 
    var val; 
}); 

wenig schneller zu bauen und nur Elemente auf einmal in meiner Meinung anhängen.