顔色問題

来源：互联网发布：一年php工资7千编辑：程序博客网时间：2024/06/03 03:49

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryのサンプル</title>

<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(function() {
var colors = [];
// ボタン1が押されたときの動作
$("#b1").click(function() {
colors.length = 0;
// 1．値を取得
$('input:checkbox[name="color"]:checked').each(function() {
// 配列に格納
colors.push($(this).val());
$('#sp1').text(colors);
});
});
// ボタン2が押されたときの動作
$("#b2").click(function() {
// 2．値を設定
$('input:checkbox[name="color"]').val(["yellow","blue"]);
});
// ボタン3が押されたときの動作
$("#b3").click(function() {
// 3．全ての項目にチェックを入れる(全選択)
$('input:checkbox[name="color"]').prop('checked',true);
});
// ボタン4が押されたときの動作
$("#b4").click(function() {
// 4．全ての項目のチェックを外す
$('input:checkbox[name="color"]').prop('checked',false);
$('#sp1').text("");
});
});
</script>
</head>
<body >
<p>選択した色 <span id="sp1"></span></p>
<input type="checkbox" name="color" value="red" checked>：赤
<input type="checkbox" name="color" value="yellow">：黄
<input type="checkbox" name="color" value="blue">：青<br/>
<input type="button" id="b1" value="ボタン1" /><br/>
<input type="button" id="b2" value="ボタン2" /><br/>
<input type="button" id="b3" value="ボタン3" /><br/>
<input type="button" id="b4" value="ボタン4" />
</body>
</html>

阅读全文

0 0