jquery inputのvalue値を表示解除

質問

jqueryでチェックボックスがチェックされたらvalue値をテキストボックスに表示するプログラムです。

全選択をすると全チェックボックスにチェックが入り全てのvalue値を取得表示します。

[問題点]
(1)：まずどれかチェックボックスを選択しておきます。
(2)：次に全選択を選択後、全選択を再び選択する（全解除）と(1)で選択した値がテキストボックスに残ってしまい、チェックが反転した形になってしまいます。

補足：チェックしたらvalue値を取得するのが正常なのですが、この問題点でチェックが外れたらvalue値を取得するに反転してしまう。

[求]
何かヒントになるようなプログラムを教えてもらえないでしょうか？
もしくは原因を教えて下さい。
宜しくお願いします。

以下プログラム
=========

$(function(){

//チェックボックス
var check = $('input[name="check"]');
var check_flag = false;
//全てを選択/解除
var checkall = $('input[name="checkall"]');
//テキストボックス
var box = $('input[name="searchBox"]');

//テキストボックスのvalue値
var txt = box.val();

//チェック判定
$.each(check,function(i) {
if ($(this).attr('checked')==true) {
check_flag = true;
return false;
}
});

//全て選択解除
checkall.change( function(){

//全てチェックする処理
$(this).parents('#check:eq(0)').find(':checkbox').attr('checked',this.checked);

//配列生成
var arry = [];

//チェックボックスのvalue値を格納
check.each( function(){
arry.push($(this).val());
});

//チェックボックスを一つずつ表示
var i=0;
while( i < arry.length ){

//正規表現
var reg = new RegExp( arry[i] + ' ' );

//もしフラグがtrueで且つ
//クリックした箇所のvalue値と一致するテキストがボックス内に表示されていたら
if( !check_flag && txt.match( reg ) ){

//ボックス内のvalue値削除
txt = txt.replace( reg,'' );

}else{

//それ以外ならクリックした箇所のvalue値+スペースを代入
txt += arry[i] + ' ';

}

box.val(txt);

i++;
}
});

//各項目チェック
check.change(function(){

//クリックした箇所のvalue値取得
var data = $(this).val();

//正規表現
var reg = new RegExp( data + ' ' );

//もしフラグがtrueで且つ
//クリックした箇所のvalue値と一致するテキストがボックス内に表示されていたら
if( !check_flag && txt.match( reg ) ){

//ボックス内のvalue値削除
txt = txt.replace( reg,'' );

}else{

//それ以外ならクリックした箇所のvalue値+スペースを代入
txt += data + ' ';

}

//結果を表示
box.val( txt );

});

});

回答No.1

nekomikekamo · ベストアンサー

動作が正しいかわかりませんが、、、
$(function(){
var checks = $('input[name="check"]'),
checkall = $('input[name="checkall"]'),
textbox = $('input[name="searchBox"]'),
copy_checkbox_to_textbox = function(){
var result = "";
checks.each(function(){
if($(this).attr('checked'))result += $(this).val() + ' ';
});
textbox.val(result);
},
clear_textbox = function(){
textbox.val("");
};
checkall.change(function(){
if($(this).attr('checked')){
checks.attr('checked', true);
copy_checkbox_to_textbox();
}else{
checks.attr('checked', false);
clear_textbox();
}
});
checks.change(function(){
copy_checkbox_to_textbox();
});
});

お礼

完璧です！コードを参考に解析したいと思います！