利用ajax對input checkbox選中刪除操作

<div>
			<button id="delete">選中刪除</button>	
			<table border='1' width="960px">
				<thead>
					<tr>
						<th><input type="checkbox" id="checkAll" name='ck'></th>
						<th>表頭1</th>
						<th>表頭1</th>
						<th>表頭1</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td><input type="checkbox" name="ck" value="1"></td>
						<td>1</td>
						<td>2</td>
						<td>3</td>
					</tr>
					<tr>
						<td><input type="checkbox" name="ck" value="2"></td>
						<td>1</td>
						<td>2</td>
						<td>3</td>
					</tr>
					<tr>
						<td><input type="checkbox" name="ck" value="3"></td>
						<td>1</td>
						<td>2</td>
						<td>3</td>
					</tr>
				</tbody>
			</table>
		</div>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
		<script>
			$("#checkAll").click(function () {
                if ($(this).is(":checked")) {
                    $("[name=ck]:checkbox").prop("checked", true);
                } else {
                    $("[name=ck]:checkbox").prop("checked", false);
                }
            });
			
		</script>
		<script>
			$(function () {
				$('#delete').click(function(){
					var c = $('tbody input:checked');
					
					for(var i =0;i< c.length;i++){
						var d =	c[i].value;
						console.log(d);
					}
					$.ajax({
						url:'delete.txt',
						type:'post',
						data:c,
						dataType: 'json',
						success: function(data){
							$(":checked").not('#checkAll').parents('tr').remove();
							console.log('刪除成功');
						},
						error:function(data) {
							console.log(data.msg);
						}
					})
				})
			})
		</script>
本代碼原鏈接爲:http://www.5ibj.xyz/news/?8171.html


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章