배열관련메서드 실습_jQuery

1.
아래의 버튼을 클릭 시 체크된 대상의 값을 합산하여 아이디 result 에 출력하도록 하여라.

<label>
	<input type="checkbox" class="price" value="1000">사과
</label>
<label>
	<input type="checkbox" class="price" value="2000">배
</label>
<label>
	<input type="checkbox" class="price" value="3000">포도
</label>
<button type="button" id="sumBtn">계산</button><br/>
<input type="text" id="result" readonly value="0">

2.
btn01 버튼 클릭 시 해당 행을 제거와 동시에 #ul02 의 동일한 행을 제거하시오.

<ul id="ul01">
	<li>
		<button type="button" class="btn01">제거</button>
	</li>
	<li>
		<button type="button" class="btn01">제거</button>
	</li>
	<li>
		<button type="button" class="btn01">제거</button>
	</li>
</ul>
<ul id="ul02">
	<li>안녕하세요</li>
	<li>안녕하세요</li>
	<li>안녕하세요</li>
</ul>

 

1. 답

<script type="text/javascript">
	$(function(){
		var result=$('#result');
		$('#sumBtn').click(function(){
			var sum = 0;
			$('.price:checked').each(function(){
				sum += Number($(this).val());
			});
			result.val(sum);
		});
	});
</script>

2. 답

<script type="text/javascript">
	$(function(){
		$('.btn01').click(function(){
			var index = $('.btn01').index(this);
			$(this).parent().remove();
			$('#ul02 li').eq(index).remove();
		})
	});
</script>