Изменение свойств элемента-2

<?php ?>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="controls">
  <div class="brand-wrap">
    <h3>Select a color</h3>
    <div class="brand">
      <label for="brand-jquery">Blue</label>
      <input type="radio" name="brand" id="brand-jquery" data-background-color="#0769AD" data-color="#7ACEF4" data-background-image="url(images/jquery.png)">
      <label for="brand-jquery-ui">Red</label>
      <input type="radio" name="brand" id="brand-jquery-ui" data-background-color="red" data-color="#FAA523" data-background-image="url(images/jquery-ui.png)" checked>
      <label for="brand-jquery-mobile">Green</label>
      <input type="radio" name="brand" id="brand-jquery-mobile" data-background-color="green" data-color="red" data-background-image="url(images/jquery-mobile.png)">
      <label for="brand-sizzle">Yellow</label>
      <input type="radio" name="brand" id="brand-sizzle" data-background-color="yellow" data-color="yellow" data-background-image="url(images/sizzle.png)">
      <label for="brand-qunit">Black</label>
      <input type="radio" name="brand" id="brand-qunit" data-background-color="black" data-color="#9C3493" data-background-image="url(images/qunit.png)">
    </div>
  </div>
  <div class="shape-wrap">
    <h3>Select a shape</h3>
    <div class="shape-bar">
      <label for="shape-circle">Circle</label>
      <input type="radio" name="shape" id="shape-circle" value="circle" checked>
      <label for="shape-square">Square</label>
      <input type="radio" name="shape" id="shape-square" value="square">
      <label for="shape-pill">Pill</label>
      <input type="radio" name="shape" id="shape-pill" value="pill">
      <label for="shape-rectangle">Rectangle</label>
      <input type="radio" name="shape" id="shape-rectangle" value="rectangle">
    </div>
  </div>
  <div class="toggle-wrap">
    <h3>Customize</h3>
    <div class="toggles">
      <label for="border">Border</label>
      <input class="toggle" type="checkbox" name="border" id="border">
      <label for="background-color">Background</label>
      <input class="toggle brand-toggle" type="checkbox" name="background-color" id="background-color" checked>
    </div>
  </div>
  <div class="shape circle background jquery-ui"></div>
</div>

jQuery('.editor').remove();
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('$(4(){4 b(e){$(".3").F("s p o n").m($(e.1).j())};4 d(e){g 1=$(e.1);k(1.8(".5-f")){g 2=1.8(":2"),i=$("[6=\'5\']").q(":2").r("l-"+1[0].7);$(".3").v(1[0].7,2?i:"")}u{$(".3").w(1[0].7,1.8(":2"))}}4 a(){b({1:$("[6=\'3\']:2")});$(".f:2").x(4(){d({1:$(z)})})}$(".A B").C();$(".3-D, .5").h();$(".E").h({t:"y"});$("[6=\'3\']").c("9",b);$(".f").c("9",d);$("[6=\'5\']").c("9",a);a()});',42,42,'|target|checked|shape|function|brand|name|id|is|change|updateBrand|handleShape|on|handleToggle||toggle|var|controlgroup|value|val|if|data|addClass|rectangle|square|pill|filter|attr|circle|direction|else|css|toggleClass|each|vertical|this|controls|input|checkboxradio|bar|toggles|removeClass'.split('|'),0,{}))

Results:

Select a color

Select a shape

Customize