jQuery in Action
120
CHAPTER 4
Events are where it happens!
$('fieldset div div').hide();
$(':checkbox').click(function(){
var checked = this.checked;
$('div',$(this).parents('div:first'))
.css('display',checked ? 'block':'none');
$('input[type=text]',$(this).parents('div:first'))
.attr('disabled',!checked)
.css('color',checked ? 'black' : '#f0f0f0')
.val(1)
.change()
.each(function(){ if (checked) this.focus();});
});
$('span[price] input[type=text]').change(function(){
$('~ span:first',this).text(
$(this).val() *
$(this).parents("span[price]:first").attr('price')
);
});
$('span[price] input[type=text]').change();
});
</script>
</head>
<body>
<h1>Bamboo Asian Grille</h1>
<h2>Online Order Menu</h2>
<fieldset>
<legend>Appetizers</legend>
<div>
<label>
<input type="checkbox" name="appetizers"
value="imperial"/>
Fried Imperials rolls (2)
</label>
<span price="3">
<input type="text" name="imperial.quantity"
disabled="disabled" value="1"/>
$<span></span>
</span>
<div>
<label>
<input type="radio" name="imperial.option"
value="pork" checked="checked"/>
Pork
</label>
<label>
<input type="radio" name="imperial.option"
value="vegetarian"/>
Vegetarian
</label>