[JavaScript] CheckBox и Select

Кратко: небольшой плагин для «связывания» элементов формы checkbox и select.
Подробнее: в зависимости от checked/unchecked элементов checkbox (с одинаковым именем) формирует список options для select.

/***********************************************
 *
 * Checkbox And Select List connector.
 * 
 * Author: KronuS
 * Version: 1.0.0
 * Date: 06.10.2011
 *
 ***********************************************/
jQuery.fn.cb_sl_c = function(options) {
	var options = jQuery.extend({
		checkbox: undefined,
		select: undefined
	}, options);
	var checkbox = options.checkbox;
	var select = options.select;
	if (checkbox == undefined || select == undefined) return null;
 
	selected = "";
	add_checked();
 
	function add_checked() {
		jQuery(checkbox).each(function() {
			if (jQuery(this).is(":checked")) {
				jQuery(select).append("<option value="+jQuery(this).val()+">"+jQuery(this).val()+"</option>");
			}
		});
	}
 
	jQuery(select).change(function() {
		selected = jQuery(this).val();
	});
 
	jQuery(checkbox).click(function() {
		jQuery(select).empty();
		add_checked();
		if (selected != "") {
			jQuery(select + " [value='"+selected+"']").attr("selected", "selected");
		}
	});
 
	return null;
};

Пример использования:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>JS</title>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.checkbox-select-connector.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$(document).cb_sl_c({'checkbox': ".testbox", 'select': "#testselect"});
			});
		</script>
	</head>
	<body>
		<form method="get" action="?">
			<fieldset>
				<div><input checked="checked" type="checkbox" class="testbox" id="testbox1" name="testbox" value="PHP" /> <label for="testbox1">PHP</label></div>
				<div><input type="checkbox" class="testbox" id="testbox2" name="testbox" value="C#" /> <label for="testbox2">C#</label></div>
				<div><input type="checkbox" class="testbox" id="testbox3" name="testbox" value="Java" /> <label for="testbox3">Java</label></div>
				<div><input checked="checked" type="checkbox" class="testbox" id="testbox4" name="testbox" value="C++" /> <label for="testbox4">C++</label></div>
				<div><input type="checkbox" class="testbox" id="testbox5" name="testbox" value="Go" /> <label for="testbox5">Go</label></div>
				<select id="testselect" name="testselect">
					<option></option>
				</select>
			</fieldset>
		</form>
	</body>
</html>

Скачать

, ,

1 комментарий
  1. Да » [PHP] WSO Builder v1.04 сказал(а):

    […] Улучшен интерфейс выбора default action (см. http://kronus.me/2011/10/javascript-checkbox-и-select/). […]

Оставить комментарий

Top ↑ | Main page | Back