jquery按顺序插入内容
本帖最后由 fxxyz 于 2013-04-24 13:14:20 编辑 有一级复选框
<input type="checkbox" name="prosize" value="38">38
<input type="checkbox" name="prosize" value="39">39
<input type="checkbox" name="prosize" value="40">40
<input type="checkbox" name="prosize" value="41">41
<input type="checkbox" name="prosize" value="42">42
根据点击复选框．来插入相应的内容
$("input[name='prosize']").click(function(){
if($(this).attr("checked"))
{
var html=gettd($(this).val());
$("#"+$(this).val()).append(html);
}
else
{
$("."+$(this).val()).remove();
}
});
function gettd(size)
{
var html = "<p class='"+size+"'>尺码:"+size+"－<input type='text' value='款号'></p>";
return html
}
<input type="checkbox" name="prosize" value="39" />39<br/>
<input type="checkbox" name="prosize" value="40" />40<br/>
<input type="checkbox" name="prosize" value="41" />41<br/>
<input type="checkbox" name="prosize" value="42" />42<br/>
<div id="temp"></div>
</body>
</html>
[解决办法]
在选取的时候不要去获取值，在提交的时候再去获取被选中的checkbox的值肯定就是顺序的了。
function getCheckbox() {
var str="";
$("input[name='checkbox']:checkbox").each(function(){
if($(this).attr("checked")){
str += $(this).val()+","
}
})
str.split(",");
alert(str[0]);
}
在.NET后台可以用这样的方法获取
string checkStr = Request["prosize"];
[解决办法]
jQuery(document).ready(function () {
jQuery("input[type='checkbox'][name='prosize']").click(function () {
alert(setVal());
});
});
var _ilist = "";
function setVal() {
_ilist = "";
jQuery("input[type='checkbox'][name='prosize']:checked").each(function (i, item) {
_ilist = _ilist + jQuery(item).val() + ",";
});
return _ilist.length > 0 ? _ilist.substring(0, _ilist.length - 1) : "";
}
[解决办法]
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("input[name='prosize']").click(function () {
if ($(this).attr("checked")) {
var html = gettd($(this).val());
if ($("#haha p").length == 0) {
$("#haha").append(html); //haha是我加的div在这个中显示html内容
}
else {
var pb = $("#haha p");
var sizes; //比较的size
for (var i = 0; i < pb.length; i++) {
sizes = pb.eq(i).attr("class");
if ($(this).val() < sizes) {
break;
}
}
if (i == pb.length) {
//没有比当前选择的size大的 就在最后加
$("#haha").append(html);
} else {
//有比当前选择的size大的，在同级的(P标签)前面加上此html
$("." + sizes).before(html);
}
}
}
else {
$("." + $(this).val()).remove();
}
});
})
function gettd(size) {
var html = "<p class='" + size + "'>尺码:" + size + "－<input type='text' value='款号'/></p>";
return html;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="checkbox" name="prosize" value="38" />38
<input type="checkbox" name="prosize" value="39" />39
<input type="checkbox" name="prosize" value="40" />40
<input type="checkbox" name="prosize" value="41" />41
<input type="checkbox" name="prosize" value="42" />42
<div id="haha">
</div>
</div>
</form>
</body>
</html>
var _a = parseInt($(a).attr("class"), 10);
var _b = parseInt($(b).attr("class"), 10);
return _a > _b ? 1 : -1;
});
$("#temp").html(ary.join(""));
}
else {
var _delVal = $(this).val();
for (var i = 0, count = ary.length; i < count; i++) {
var _delIndex = $(ary[i]).attr("class");
if (_delVal == _delIndex) {
ary.splice(i, 1);
}
}
$("#temp").find("." + $(this).val()).remove();
}
});
function getCount() {
return $("#temp").children("p").length;
}
function gettd(size) {
var html = "<p class='" + size + "'>尺码:" + size + "<input type='text' value='款号'></p>";
return html;
}
});
</script>
</head>
<body>
<input type="checkbox" name="prosize" value="38" />38<br/>
<input type="checkbox" name="prosize" value="39" />39<br/>
<input type="checkbox" name="prosize" value="40" />40<br/>
<input type="checkbox" name="prosize" value="41" />41<br/>
<input type="checkbox" name="prosize" value="42" />42<br/>
<div id="temp"></div>
</body>
</html>
