如何在PHP上創建多選的複選框

Question

我有input field我將它改爲multiple choices的複選框。 在這裏擔心我不能添加checkbox，我的意思是我的用戶應該點擊Ctrl並選擇同時選擇幾個選項。你可以看到它在這個圖片：

這下我對形式的代碼：

$app->get('/Chart/{currency}/{year}/{zone}/{lru}....... , function(Request $request,...... $repsite, $lru, $contract, $forecast) use ($app) { 
if ($app['security']->isGranted('ROLE_USER')) { 
    ///start form 
    $user = $app['security']->getToken()->getUser();   
    $form = $app['form.factory']->createBuilder('form')->setMethod('GET') 
    . 
    . 
    . 
    . 
->add('lru', 'choice', array(
        'choices' => array(     

        '\'ATSU\'' => 'ATSU', 
        '\'APCC\'' => 'APCC', 
         ..... 
        ), 

        'required' => FALSE, 
        'empty_value' => 'ALL', 
        'empty_data' => NULL, 
        'multiple' => TRUE      
        //'expanded' => TRUE 
       )) 

我想這樣做就對了經典的複選框，這樣的：

我做了一個論壇的研究，我發現我應該使用multiple和expanded和將它們設置爲TRUE。當我添加expanded=TRUE列表變得非常「醜陋」，我給你一個screensheet：

能否請你告訴我，我怎樣才能改變我的代碼做了multiple choice一個複選框，如上面的圖片。 我希望我找到解決方案。謝謝。

Answer 1

你可以做到這一點，這是用代碼實現的。 你將需要jQuery來做到這一點。根據您的使用

改變這種代碼

https://codepen.io/elmahdim/pen/hlmri

/* 
 
\t Dropdown with Multiple checkbox select with jQuery - May 27, 2013 
 
\t (c) 2013 @ElmahdiMahmoud 
 
\t license: https://www.opensource.org/licenses/mit-license.php 
 
*/ 
 

 
$(".dropdown dt a").on('click', function() { 
 
    $(".dropdown dd ul").slideToggle('fast'); 
 
}); 
 

 
$(".dropdown dd ul li a").on('click', function() { 
 
    $(".dropdown dd ul").hide(); 
 
}); 
 

 
function getSelectedValue(id) { 
 
    return $("#" + id).find("dt a span.value").html(); 
 
} 
 

 
$(document).bind('click', function(e) { 
 
    var $clicked = $(e.target); 
 
    if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide(); 
 
}); 
 

 
$('.mutliSelect input[type="checkbox"]').on('click', function() { 
 

 
    var title = $(this).closest('.mutliSelect').find('input[type="checkbox"]').val(), 
 
    title = $(this).val() + ","; 
 

 
    if ($(this).is(':checked')) { 
 
    var html = '<span title="' + title + '">' + title + '</span>'; 
 
    $('.multiSel').append(html); 
 
    $(".hida").hide(); 
 
    } else { 
 
    $('span[title="' + title + '"]').remove(); 
 
    var ret = $(".hida"); 
 
    $('.dropdown dt a').append(ret); 
 

 
    } 
 
});

body { 
 
    font: normal 14px/100% "Andale Mono", AndaleMono, monospace; 
 
    color: #fff; 
 
    padding: 50px; 
 
    width: 300px; 
 
    margin: 0 auto; 
 
    background-color: #374954; 
 
} 
 

 
.dropdown { 
 
    position: absolute; 
 
    top:50%; 
 
    transform: translateY(-50%); 
 
} 
 

 
a { 
 
    color: #fff; 
 
} 
 

 
.dropdown dd, 
 
.dropdown dt { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
.dropdown ul { 
 
    margin: -1px 0 0 0; 
 
} 
 

 
.dropdown dd { 
 
    position: relative; 
 
} 
 

 
.dropdown a, 
 
.dropdown a:visited { 
 
    color: #fff; 
 
    text-decoration: none; 
 
    outline: none; 
 
    font-size: 12px; 
 
} 
 

 
.dropdown dt a { 
 
    background-color: #4F6877; 
 
    display: block; 
 
    padding: 8px 20px 5px 10px; 
 
    min-height: 25px; 
 
    line-height: 24px; 
 
    overflow: hidden; 
 
    border: 0; 
 
    width: 272px; 
 
} 
 

 
.dropdown dt a span, 
 
.multiSel span { 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    padding: 0 3px 2px 0; 
 
} 
 

 
.dropdown dd ul { 
 
    background-color: #4F6877; 
 
    border: 0; 
 
    color: #fff; 
 
    display: none; 
 
    left: 0px; 
 
    padding: 2px 15px 2px 5px; 
 
    position: absolute; 
 
    top: 2px; 
 
    width: 280px; 
 
    list-style: none; 
 
    height: 100px; 
 
    overflow: auto; 
 
} 
 

 
.dropdown span.value { 
 
    display: none; 
 
} 
 

 
.dropdown dd ul li a { 
 
    padding: 5px; 
 
    display: block; 
 
} 
 

 
.dropdown dd ul li a:hover { 
 
    background-color: #fff; 
 
} 
 

 
button { 
 
    background-color: #6BBE92; 
 
    width: 302px; 
 
    border: 0; 
 
    padding: 10px 0; 
 
    margin: 5px 0; 
 
    text-align: center; 
 
    color: #fff; 
 
    font-weight: bold; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<dl class="dropdown"> 
 
    
 
    <dt> 
 
    <a href="#"> 
 
     <span class="hida">Select</span>  
 
     <p class="multiSel"></p> 
 
    </a> 
 
    </dt> 
 
    
 
    <dd> 
 
     <div class="mutliSelect"> 
 
      <ul> 
 
       <li> 
 
        <input type="checkbox" value="Apple" />Apple</li> 
 
       <li> 
 
        <input type="checkbox" value="Blackberry" />Blackberry</li> 
 
       <li> 
 
        <input type="checkbox" value="HTC" />HTC</li> 
 
       <li> 
 
        <input type="checkbox" value="Sony Ericson" />Sony Ericson</li> 
 
       <li> 
 
        <input type="checkbox" value="Motorola" />Motorola</li> 
 
       <li> 
 
        <input type="checkbox" value="Nokia" />Nokia</li> 
 
      </ul> 
 
     </div> 
 
    </dd> 
 
    <button>Filter</button> 
 
</dl>

希望這有助於