私は自分のWebページの1つにチェックボックスとチェックボックスのリストを使用しています。ASP.net UIの更新の問題
UIカラー
のようなものです - ヘッダーチェックボックス
CheckBoxListの項目が
あるレッド
グリーン
ブルー
イエロー
完全な選択 - ヘッダーのチェックボックスをクリックすると、チェックボックスのリスト全体が選択/選択解除されます。
チェックボックスリストを部分的に選択すると、部分的な選択を示す背景色が異なるヘッダーチェックボックスが表示されます。
各チェックボックスのリスト選択の変更で、選択したアイテムの数をチェックします。クライアントサーバー環境では、時間の遅延があり、チェックボックスリストで2つの連続した選択を行うと、最初の選択に対してヘッダーコントロールの更新が行われ、UIが更新されるまでに2番目の選択はなくなります。 私はJavaScriptを使用して上記のものも実装しましたが、動作も同じです。 これに代わる方法は何ですか？
あなたの質問は特に明確ではありませんが、3つの状態チェックボックスのいくつかの並べ替えをしたいのですか？また、ポストバックが発生しているように聞こえて、2回目の選択を消去しますか？
もしそうなら、いくつかのコントロールオプションがあります。ここには役に立つかもしれないものへのリンクがあります。 http://www.chadscharf.com/index.php/2008/10/3-state-checkbox-using-microsoft-ajax/
あなたが実際にあなたが言及したスクリーンショットにいくつかのコードとリンクを掲示する必要があります。
あなたのreply.Yesありがとう私は3つの状態チェックボックスのようなものを達成しようとしています。私はスクリーンショットを添付することができませんでした。 – MithunRaj
あなたが満足しようとしているシンプルなアプローチはJavascriptを利用しています。確かに、DOM要素の配線を簡素化するために、Jqueryを使用している方向があります。
以下は、2つのシナリオをちょっとカバーする例です。上位レベルのコントロールが、すべての要素をチェック/チェック解除します。第2に、個人はトップレベル要素の背景を変更する。これは落として実行するコードではなく、単なる技術を示しています。あなたがJqueryに慣れていない場合は、+ Jqueryサイトの各機能を検索するだけで、変更と調整ができます。楽しい！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
// Wire up the 'select-all' to the child elements
$('#topLevel').bind('change' , function(){
// Record this object
var base = this;
// Change the child elements
$('#checkboxContainer input').each(function(){
$(this).attr('checked' , $(base).is(':checked'))
})
});
// Make the individual checkbox selects alter the
// background of the top-level wrapper
$('#checkboxContainer input').bind('change' , function(){
// Get a handle to the top item
var topLevel = $('#topLevelWrapper');
// Have we selected the item?
if($(this).is(':checked')){
// Remove the previous class assignments
topLevel.attr('class' , '');
// Assign the current css class from the parent
topLevel.addClass($(this).parent().attr('class'));
}
});
})
</script>
<style type="text/css">
.Red{
background-color:#F00;
}
.Green{
background-color:#0F0;
}
.Blue{
background-color:#00F;
}
</style>
</head>
<body>
<div id="topLevelWrapper">
<label for="topLevel">Top level selection</label>
<input type="checkbox" id="topLevel" />
</div>
<div id="checkboxContainer">
<ul>
<li class="Red">
<label for="topLevel">Red</label>
<input type="checkbox" />
</li>
<li class="Blue">
<label for="topLevel">Blue</label>
<input type="checkbox" />
</li>
<li class="Green">
<label for="topLevel">Green</label>
<input type="checkbox" />
</li>
</ul>
</div>
</body>
私は二度それを読んで、まだあなたが話しているかわかりません。 http://www.whathaveyoutried.com – Marc
あなたが話しているスクリーンショットは？ –
はさらに詳しい情報が必要です。あなたは何を達成しようとしていますか？ （チェックボックスをクリックすると）シーンの後ろで何が起きているのですか？ –