<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Başlıksız Belge</title>
<style>
body
{
font-family: Open sans, Helvetica;
background: #111;
color: white;
font-size: 16px;
}
h1
{
font-weight: lighter;
}
small
{
color: firebrick;
}
div.checkbox_select
{
width: 200px;
}
.checkbox_select_anchor
{
display: block;
background: firebrick;
color: white;
cursor: pointer;
padding: 10px 5px 5px;
position: relative;
}
.checkbox_select_anchor:after
{
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid darkred;
content: "";
position: absolute;
right: 10px;
top: 15px;
}
.expanded .checkbox_select_anchor:after
{
border-top: 0;
border-bottom: 10px solid firebrick;
}
.checkbox_select_anchor:hover
{
background: #FF3030 !important;
}
.expanded .checkbox_select_anchor
{
background: #7C1818;
}
div.checkbox_select .select_input
{
width: 100%;
cursor: pointer;
}
.checkbox_select_dropdown
{
display: none;
background: whitesmoke;
}
.checkbox_select_dropdown.show
{
display: block;
}
.checkbox_select_dropdown ul
{
max-height: 150px;
overflow-y: scroll;
overflow-x: hidden;
padding: 0;
margin: 0;
border: 1px solid #999;
border-top: 0;
border-bottom: 0;
}
.checkbox_select_dropdown ul li
{
list-style: none;
position: relative;
color: #666;
}
.checkbox_select_dropdown ul li label
{
position: relative;
padding: 10px 5px 5px 40px;
display: block;
cursor: pointer;
}
.checkbox_select_dropdown ul li label:hover
{
background: #cbcbcb;
color: white;
}
.checkbox_select_dropdown ul li input:checked + label
{
background: #bbb;
color: white;
text-shadow: 0px 1px 1px rgba(150, 150, 150, 1);
}
.checkbox_select_dropdown ul li input
{
position: absolute;
left:0;
z-index:1;
display: inline-block;
height: 100%;
width: 30px;
}
.checkbox_select_search
{
width: 200px;
padding: 10px 5px 5px;
border: 1px solid #999;
border-top: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.checkbox_select_submit
{
background: #00A600;
color: white;
padding: 10px 5px 5px;
border: 0;
width: 100%;
font-size: 14px;
cursor: pointer;
}
.hide
{
display: none;
}
</style>
</head>
<body>
<h1>multiselect</h1>
//here I have an form id and it is used javascript function
<form id="make_checkbox_select">
<select name="Cinsiyet">
<option data-count="(2)" value="Kadin">Kadın </option>
<option data-count="(23)" value="erkek">Erkek </option>
</select>
<input type="submit" />
</form>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(function()
{
var mySelectCheckbox = new checkbox_select(
{
selector : "#make_checkbox_select",
selected_translation : "seçildi",
all_translation : "Tamamı Seçildi",
not_found : "Bulunamadı",
// Event during initialization
onApply : function(e)
{
alert("Custom Event: " + e.selected);
}
});
});
// variable_names
// functionNames
// CONSTANT_VARIABLE_NAMES
// $_my_jquery_selected_element
if(typeof String.prototype.trim !== 'function') {
String.prototype.trim = function()
{
return this.replace(/^\s+|\s+$/g, '');
}
}
var checkbox_select = function(params)
{
// Error handling first
// ----------------------------------------------------------------------------------------------------
var error = false;
// If the selector is not given
if(!params.selector) { console.error("selector needs to be defined"); error = true; }
// If the selector is not a string
if(typeof params.selector != "string") { console.error("selector needs to be a string"); error = true; }
// If the element is not a form
if(!$(params.selector).is("form")) { console.error("Element needs to be a form"); error = true; }
// If the element doesn't contain a select
if($(params.selector).find("select").length < 1) { console.error("Element needs to have a select in it"); error = true; }
// If the element doesn't contain option elements
if($(params.selector).find("option").length < 1) { console.error("Select element needs to have an option in it"); error = true; }
// If the select element doesn't have a name attribute
if($(params.selector).find('select').attr('name') == undefined) { console.error("Select element needs to have a name attribute"); error = true; }
// If there was an error at all, dont continue in the code.
if(error)
return false;
// ----------------------------------------------------------------------------------------------------
var that = this,
$_native_form = $(params.selector),
$_native_select = $_native_form.find('select'),
// Variables
selector = params.selector,
select_name = $_native_select.attr('name').charAt(0).toUpperCase() + $_native_select.attr('name').substr(1),
selected_translation = params.selected_translation ? params.selected_translation : "selected",
all_translation = params.all_translation ? params.all_translation : "All " + select_name + "s",
not_found_text = params.not_found ? params.not_found : "No " + select_name + "s found.",
currently_selected = [],
// Create the elements needed for the checkbox select
$_parent_div = $("<div />") .addClass("checkbox_select"),
$_select_anchor = $("<a />") .addClass("checkbox_select_anchor") .text( select_name ),
$_search = $("<input />") .addClass("checkbox_select_search"),
$_submit = $("<input />") .addClass("checkbox_select_submit") .val("Apply") .attr('type','submit') .data("selected", ""),
$_dropdown_div = $("<div />") .addClass("checkbox_select_dropdown"),
$_not_found = $("<span />") .addClass("not_found hide") .text(not_found_text),
$_ul = $("<ul />"),
updateCurrentlySelected = function()
{
var selected = [];
$_ul.find("input:checked").each(
function()
{
selected.push($(this).val());
}
);
currently_selected = selected;
if(selected.length == 0)
{
$_select_anchor.text( select_name )
}
else if(selected.length == 1)
{
$_select_anchor.text( selected[0] + " " + selected_translation );
}
else if(selected.length == $_ul.find("input[type=checkbox]").length)
{
$_select_anchor.text( all_translation );
}
else
{
$_select_anchor.text( selected.length + " " + selected_translation );
}
},
// Template for the li, will be used in a loop.
createItem = function(name, value, count)
{
var uID = 'checkbox_select_' + select_name + "_" + name.replace(" ", "_"),
$_li = $("<li />"),
$_checkbox = $("<input />").attr(
{
'name' : name,
'id' : uID,
'type' : "checkbox",
'value' : value
}
)
.click(
function()
{
updateCurrentlySelected();
}
),
$_label = $("<label />").attr('for', uID),
$_name_span = $("<span />").text(name).prependTo($_label),
$_count_span = $("<span />").text(count).appendTo($_label);
return $_li.append( $_checkbox.after( $_label ) );
},
apply = function()
{
$_dropdown_div.toggleClass("show");
$_parent_div.toggleClass("expanded");
if(!$_parent_div.hasClass("expanded"))
{
// Only do the Apply event if its different
if(currently_selected != $_submit.data("selected"))
{
$_submit.data("selected" , currently_selected);
that.onApply(
{
selected : $_submit.data("selected")
}
);
}
}
};
// Event of this instance
that.onApply = typeof params.onApply == "function" ?
params.onApply :
function(e)
{
//e.selected is accessible
};
that.update = function()
{
$_ul.empty();
$_native_select.find("option").each(
function(i)
{
$_ul.append( createItem( $(this).text(), $(this).val(), $(this).data("count") ) );
}
);
updateCurrentlySelected();
}
that.check = function(checkbox_name, checked)
{
//$_ul.find("input[type=checkbox][name=" + trim(checkbox_name) + "]").attr('checked', checked ? checked : false);
$_ul.find("input[type=checkbox]").each(function()
{
// If this elements name is equal to the one sent in the function
if($(this).attr('name') == checkbox_name)
{
// Apply the checked state to this checkbox
$(this).attr('checked', checked ? checked : false);
// Break out of each loop
return false;
}
});
updateCurrentlySelected();
}
// Build mark up before pushing into page
$_dropdown_div .prepend($_search);
$_dropdown_div .append($_ul);
$_dropdown_div .append($_not_found);
$_dropdown_div .append($_submit);
$_dropdown_div .appendTo($_parent_div);
$_select_anchor .prependTo($_parent_div);
// Iterate through option elements
that.update();
// Events
// Actual dropdown action
$_select_anchor.click(
function()
{
apply();
}
);
// Filters the checkboxes by search on keyup
$_search.keyup(
function()
{
var search = $(this).val().toLowerCase().trim();
if( search.length == 1 )
{
$_ul.find("label").each(
function()
{
if($(this).text().toLowerCase().charAt(0) == search.charAt(0))
{
if($(this).parent().hasClass("hide"))
$(this).parent().removeClass("hide");
if(!$_not_found.hasClass("hide"))
$_not_found.addClass("hide");
}
else
{
if(!$(this).parent().hasClass("hide"))
$(this).parent().addClass("hide");
if($_not_found.hasClass("hide"))
$_not_found.removeClass("hide");
}
}
);
}
else
{
// If it doesn't contain
if($_ul.text().toLowerCase().indexOf(search) == -1)
{
if($_not_found.hasClass("hide"))
$_not_found.removeClass("hide");
}
else
{
if(!$_not_found.hasClass("hide"))
$_not_found.addClass("hide");
}
$_ul.find("label").each(
function()
{
if($(this).text().toLowerCase().indexOf(search) > -1)
{
if($(this).parent().hasClass("hide"))
$(this).parent().removeClass("hide");
}
else
{
if(!$(this).parent().hasClass("hide"))
$(this).parent().addClass("hide");
}
}
);
}
}
);
$_submit.click(
function(e)
{
e.preventDefault();
apply();
}
);
// Delete the original form submit
$(params.selector).find('input[type=submit]').remove();
// Put finalized markup into page.
$_native_select.after($_parent_div);
// Hide the original element
$_native_select.hide();
};
</script>
</html>/ 我想使用多个form_id，因此我将发送不同的参数以起作用。在函数中，我们有选择器：“＃make_checkbox_select”，它的形式为ID，带＃号。我想向它发送一个参数。我尝试过了功能（id）{选择器：ID，......}但这不起作用。如何使用此功能来使用3个多选复选框？ /
这是简单的示例-如何将参数传递给表单提交处理程序：
var onFormSubmit = function(formId) {
alert('submit: id = ' + formId);
}<form id="form1" onsubmit="onFormSubmit('form1')">
<input type="text" name="inputText" value="text1"/>
<button type="submit">Submit form1</button>
</form>
<form id="form2" onsubmit="onFormSubmit('form2')">
<input type="text" name="inputText" value="text2"/>
<button type="submit">Submit form2</button>
</form>