체크박스처리하기

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"/>
        <title>JQuery Examples</title>
        <script src="../js/jquery-1.6.2.min.js" type="text/javascript">
        </script>
		<script language="JavaScript">
			$(document).ready(function() {   
				$('form').find(':checkbox').click(function(){
					alert($(this).attr('id'));
					alert($(this).is(':checked'));
				});
			});
		</script>
    
                <style type="text/css">.another_category {
    border: 1px solid #E5E5E5;
    padding: 10px 10px 5px;
    margin: 10px 0;
    clear: both;
}

.another_category h4 {
    font-size: 12px !important;
    margin: 0 !important;
    border-bottom: 1px solid #E5E5E5 !important;
    padding: 2px 0 6px !important;
}

.another_category h4 a {
    font-weight: bold !important;
}

.another_category table {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100% !important;
    margin-top: 10px !important;
}

* html .another_category table {
    width: auto !important;
}

*:first-child + html .another_category table {
    width: auto !important;
}

.another_category th, .another_category td {
    padding: 0 0 4px !important;
}

.another_category th {
    text-align: left;
    font-size: 12px !important;
    font-weight: normal;
    word-break: break-all;
    overflow: hidden;
    line-height: 1.5;
}

.another_category td {
    text-align: right;
    width: 80px;
    font-size: 11px;
}

.another_category th a {
    font-weight: normal;
    text-decoration: none;
    border: none !important;
}

.another_category th a.current {
    font-weight: bold;
    text-decoration: none !important;
    border-bottom: 1px solid !important;
}

.another_category th span {
    font-weight: normal;
    text-decoration: none;
    font: 10px Tahoma, Sans-serif;
    border: none !important;
}

.another_category_color_gray, .another_category_color_gray h4 {
    border-color: #E5E5E5 !important;
}

.another_category_color_gray * {
    color: #909090 !important;
}

.another_category_color_gray th a.current {
    border-color: #909090 !important;
}

.another_category_color_gray h4, .another_category_color_gray h4 a {
    color: #737373 !important;
}

.another_category_color_red, .another_category_color_red h4 {
    border-color: #F6D4D3 !important;
}

.another_category_color_red * {
    color: #E86869 !important;
}

.another_category_color_red th a.current {
    border-color: #E86869 !important;
}

.another_category_color_red h4, .another_category_color_red h4 a {
    color: #ED0908 !important;
}

.another_category_color_green, .another_category_color_green h4 {
    border-color: #CCE7C8 !important;
}

.another_category_color_green * {
    color: #64C05B !important;
}

.another_category_color_green th a.current {
    border-color: #64C05B !important;
}

.another_category_color_green h4, .another_category_color_green h4 a {
    color: #3EA731 !important;
}

.another_category_color_blue, .another_category_color_blue h4 {
    border-color: #C8DAF2 !important;
}

.another_category_color_blue * {
    color: #477FD6 !important;
}

.another_category_color_blue th a.current {
    border-color: #477FD6 !important;
}

.another_category_color_blue h4, .another_category_color_blue h4 a {
    color: #1960CA !important;
}

.another_category_color_violet, .another_category_color_violet h4 {
    border-color: #E1CEEC !important;
}

.another_category_color_violet * {
    color: #9D64C5 !important;
}

.another_category_color_violet th a.current {
    border-color: #9D64C5 !important;
}

.another_category_color_violet h4, .another_category_color_violet h4 a {
    color: #7E2CB5 !important;
}
</style>

<script type="application/ld+json">
    {"@context":"http://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@id":"https://tazz009.tistory.com/434","name":null},"url":"https://tazz009.tistory.com/434","headline":"체크박스처리하기","description":"Check/Uncheck all Checkboxes Pizza $5 HotDog $2 Coke $1 French Fries $3","author":{"@type":"Person","name":"우혁이 아빠","logo":null},"image":{"@type":"ImageObject","url":"https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Ftistory_admin%2Fstatic%2Fimages%2FopenGraph%2Fopengraph.png","width":"800px","height":"800px"},"datePublished":"2011-10-10T09:12:48+09:00","dateModified":"2011-10-10T09:12:48+09:00","publisher":{"@type":"Organization","name":"TISTORY","logo":{"@type":"ImageObject","url":"https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png","width":"800px","height":"800px"}}}
</script>

<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-7c7a62cfef2026f12ec313f0ebcc6daafb4361d7/static/style/dialog.css"/>
<link rel="stylesheet" type="text/css" href="//t1.daumcdn.net/tistory_admin/www/style/top/font.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-7c7a62cfef2026f12ec313f0ebcc6daafb4361d7/static/style/postBtn.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-7c7a62cfef2026f12ec313f0ebcc6daafb4361d7/static/style/tistory.css"/>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-7c7a62cfef2026f12ec313f0ebcc6daafb4361d7/static/script/common.js"></script>

</head>
    <body>
    	<form>   
			<div class="infobox"><input type="checkbox" id="checkall">Check/Uncheck all Checkboxes</div>
			<div class="infobox"><input type="checkbox"  id="pizza" name="pizza" value=5>Pizza $5</div>
			<div class="infobox"> <input type="checkbox"  id="hotdog" name="hotdog" value=2>HotDog $2</div>
			<div class="infobox"><input type="checkbox"  id="coke" name="coke" value=1>Coke $1</div>
			<div class="infobox"><input type="checkbox"  id="fries" name="fries" value=3>French Fries $3</div>
			</form>	
    
                <div style="margin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0"></div>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-7c7a62cfef2026f12ec313f0ebcc6daafb4361d7/static/script/common.js"></script>
<script type="text/javascript">window.roosevelt_params_queue = window.roosevelt_params_queue || [{channel_id: 'dk', channel_label: '{tistory}'}]</script>
<script type="text/javascript" src="//t1.daumcdn.net/midas/rt/dk_bt/roosevelt_dk_bt.js" async="async"></script>

</body>
</html>

저작자표시 (새창열림)

'jQuery' 카테고리의 다른 글

ebook 스타일로 만들어주는 jQuery 라이브러리 (0)	2012.03.27
jQuery 속도 개선에 대한 좋은 문서 (0)	2011.11.03
password strength check (0)	2011.09.30
선택된 elements 확인해보는 방법 (0)	2011.04.21
jQuery Mobile (0)	2010.10.21

체크박스처리하기

'jQuery' 카테고리의 다른 글

'jQuery' Related Articles

티스토리툴바