[ACCEPTED]-HTML Checkboxes in select list-css

Accepted answer

Score: 11

A cross-browser CSS solution that conform 1 CSS level 2 standard:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>select-multiple</title>
    <style>
       /* option:checked:before { content: "✓" } */
       option:before { content: "☐ " }
       option:checked:before { content: "☑ " }
    </style>
</head>
<body>
<h1>select-multiple</h1>
<select multiple="" size="5" style="width: 200px;">
    <option value="0">Banana</option>
    <option value="1">Cherry</option>
    <option value="2">Lemon</option>
    <option value="3">Banana</option>
    <option value="4">Cherry</option>
    <option value="5">Lemon</option>
    <option value="6">Banana</option>
</select>
</body>
</html>

Fiddle

Score: 6

In HTML the only valid children of the select 20 element are option and optgroup. I strongly 19 recommend not creating any sort of non-standard 18 form control as you will be defeating accessibility. I 17 recommend you use standard form controls 16 in the standard manner with label elements 15 only. You can modify the appearance and 14 interactivity of those form controls to 13 your hearts content using CSS and JavaScript, except 12 don't alter the visual flow order or tab 11 order as that also defeats accessibility.

The 10 accessible alternative to the Microsoft 9 form is to use a standard select list with 8 the "multiple" attribute so that multiple 7 options can be selected from a single list. Here 6 is an example:

<select id="myselectlist" name="myselectlist" multiple="multiple">
    <option value="option 1">option 1</option>
</select>

You could use CSS to fake 5 the appearance of checkboxes with the appearance 4 of a checked checkbox as a background graphic 3 that appears from the option's pseudo class 2 of "active". I would not go much further 1 than that however.

Score: 4

I tried a lot of js plugin for checkboxes 2 in select list and the best one so far is 1 Bootstrap Multiselect

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>jQuery Multi Select Dropdown with Checkboxes</title>

<link rel="stylesheet" href="css/bootstrap-3.1.1.min.css" type="text/css" />
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>

</head>

<body>

<form id="form1">

<div style="padding:20px">

<select id="chkveg" multiple="multiple">

    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>

</select>

<br /><br />

<input type="button" id="btnget" value="Get Selected Values" />

<script type="text/javascript">

$(function() {

    $('#chkveg').multiselect({

        includeSelectAllOption: true
    });

    $('#btnget').click(function(){

        alert($('#chkveg').val());
    });
});

</script>

</div>

</form>

</body>
</html>

Here's the DEMO

Score: 2

Maybe this is not a real answer, but anyway:

That's 12 not a standard HTML control, they built 11 it with a series of text inputs and divs, you'd 10 have to do LOTS of work to reproduce that 9 behavior, so that it works (possibly with 8 any browser)...

I'm not aware of any pre-built 7 helpers for MVC, maybe there is something 6 for JQuery? Anyway, if you can't find one 5 and you had to do that manually, maybe you 4 should choose other means with more standard 3 components (or revert to flash or silverlight 2 which are much more convenitent for this 1 kind of customizations).

Score: 2

You could try just leaving it as is pretty 9 much except add

.ms_selectList{ display: none; }

Add the above to what you 8 already have for ms_selectList

Then in jquery 7 have a click function of some kind that 6 will make the ms_selectList display clock 5 essentially making it appear to be like 4 a select box when its really just an absolutely 3 positioned div tag with a bunch of checkboxes 2 inside.

And the jquery ought to be something 1 like this,

$(document).ready(function(){

    $('.ctrl').click(function(){
        $('#selectList').toggle();
    });

})

Score: 0

This is not a standard HTML form control, it 6 has been custom built by the developers.

I'm 5 not aware of any open source solutions that 4 exist that will reproduce this behaviour 3 for you. I'm afraid it looks unlikely you 2 can deliver this without more effort than 1 it will be worth.

Source: stackoverflow.com

[ACCEPTED]-HTML Checkboxes in select list-css

Split and view the long sentence in multiple lines in html table

HTML.Checkboxfor to Toggle button HTML?

In html /css, is there anyway to have a span "cut off" instead of going on to another line (and visually showing the cut off?)

Unable to set data-url value using jQuery in Bootstrap table

Working example for JavaScriptResult in asp.net mvc

Javascript in Virtual Directory unaware of Virtual Directory

event binding in knockout.js

Passing data to a jQuery UI Dialog

SignalR $.connection is undefined

Handle user hitting 'Enter' key in a ASP.NET MVC web site