弹框多选

最新推荐文章于 2023-07-04 13:47:07 发布

dsajuahwebasjdua

最新推荐文章于 2023-07-04 13:47:07 发布

阅读量572

点赞数 1

分类专栏： web前段文章标签： html javascript

本文链接：https://blog.csdn.net/cc6208048/article/details/109535179

版权

web前段专栏收录该内容

1 篇文章 0 订阅

订阅专栏

按钮点击弹出选择框选择后显示结果
multipleSelect.html

<body>
	<div class="col-sm-12">
		<div class="form-group">
			<input id="checkboxLength" name="checkboxLength" type="hidden">
		</div>
		<div class="form-group" id="checkboxArray">
			<div class="row">
				<div class="col-sm-offset-1" id="multipleSelect">
					
				</div>
			</div>
		</div>
		<div class="form-group" id="checkboxChoose">
			<div class="col-sm-offset-2">
				<a href="#" id="confirm">全选</a>
				<label>/</label>
				<a href="#" id="cancel">全不选</a>
			</div>
		</div>
		<div class="form-group">
			<div class="col-sm-offset-7">
				<button id="submitButton" type="button" onclick="submitButton()" class="btn btn-primary  btn-sm">提交</button>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="multipleSelect.js"></script>
</body>

multipleSelect.js

$().ready(function() {
	DynamicSelectCheckedBox();
});
$("#confirm").bind('click', function(){
	$("input:checkbox[name='selected']").prop("checked", "checked");
});
$("#cancel").bind('click', function(){
	$("input:checkbox[name='selected']").prop("checked", "");
});
function DynamicSelectCheckedBox(){
	$.ajax({
		url: "",//通过地址动态获取多选号
		type: "post",
		success:function(data){
			var html = "";
			for (var i = 0; i < data.length; i++) {
				for (var i = 0; i < data.length; i++) {
				if(i == 0){
					html += '<label class="control-label"><input id="' + 'spinningNumber' + i + '" value="' + data[i] + '" name="selected" type="checkbox"/>&nbsp;' + data[i] + '&nbsp;&nbsp;</label>&nbsp;';
				}else if(i > 0 && i < 9){
					html += '&nbsp;<label class="control-label"><input id="' + 'spinningNumber' + i + '" value="' + data[i] + '" name="selected" type="checkbox"/>&nbsp;' + data[i] + '&nbsp;&nbsp;</label>&nbsp;';
				}else{
					html += '&nbsp;<label class="control-label"><input id="' + 'spinningNumber' + i + '" value="' + data[i] + '" name="selected" type="checkbox"/>&nbsp;' + data[i] + '</label>&nbsp;';
				}
			}
			$("#mutipleSelect").append(html);
			document.getElementById('checkboxLength').value = data.length;
		},
		error:function(){
			
		}
	});
}
function submitButton(){
	var checkboxLength = document.getElementById('checkboxLength').value;
	var jsonStr = "";
	for(i = 0; i < parseInt(checkboxLength.trim()); i++) {		
		var rowAttrSign = "" + i;
		var id = document.getElementById(rowAttrSign).value;
		var rowCheck = 1;
		if(document.getElementById(rowAttrSign).checked){
			rowCheck = 1;
			jsonStr += id + ",";
		}else{
			rowCheck = 0;
		}
	}
	parent.checkboxSelect(jsonStr); // 主页面方法 传递 多选值至后端
	var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
	parent.layer.close(index);
}