-1

チェックボックスがチェックされるたびに、以下の関数が呼び出されます。私の問題は、ここで利用可能なすべてのデータを消去する別の関数が必要なことです。

最初に私の問題を説明しましょう：

プログラムの概念は、テキスト ボックスをチェックボックスの値で更新することです。2 つのチェック ボックスがオンになっている場合、テキスト ボックスには 2 つの値が含まれます。

チェックボックスのデータをクリアする機能が必要なので、3番目のチェックボックスをクリックすると、テキスト領域から1番目と2番目を削除して、3番目のチェックボックスの値のみを表示する必要があります。これは、ページをリロードせずにすべて発生するはずです

<script>
    function chkcontrol(j){
        var textbox = document.getElementById("list");
        var textbox1 = document.getElementById("val_id");
        var values = [];    
        var val_id=[];
        if(document.getElementById(1).checked) {
            values.push('A1');
            val_id.push('1');
        }
        if(document.getElementById(2).checked) {
            values.push('A2');
            val_id.push('2');   }
        if(document.getElementById(3).checked) {
            values.push("A3");
            val_id.push('3');
        }
        if(document.getElementById(4).checked) {
            values.push("A4");
            val_id.push('4');
        }
        if(document.getElementById(5).checked) {
            values.push("A5");
            val_id.push('5');
        }
        if(document.getElementById(6).checked) {
            values.push("A6");
            val_id.push('6');
        }

        textbox.value = values.join(",");
        textbox1.value = val_id.join(",");
    }

    function removeAll(){
    }
</script>

<input id="list" type="text" name="list">
<input id="val_id" type="text" name="val_id">
<input type="checkbox" name="ckb" value="A1" id="1" onclick='chkcontrol(0)';>
<label for="1"></label>
<input type="checkbox" name="ckb" value="A2" id="2" onclick='chkcontrol(0)';>
<label for="2"></label>
<input type="checkbox" name="ckb" value="A3" id="3" onclick='chkcontrol(0)';>
<label for="3"></label>
4

3 に答える 3

0

なぜあなたのコードに 29 分も費やしたのかわかりませんが、とにかくここにあります。楽しみ。将来のためのいくつかの指針：

  1. jQuery を使用する場合は、スクリプトをマークアップから離してください。つまり、onclick イベントを使用しないようにしてください。
  2. DOM 要素のコレクションに対して無限に if ステートメントを実行していることに気付いた場合は、おそらくもっと良い方法があります。

とにかく、私はハイホースを降ります。コードは次のとおりです。

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("input[type=\"checkbox\"][name=\"ckb\"]").click(function () {
                var values = [];
                var val_id = [];
                var checked = $("input[type=\"checkbox\"][name=\"ckb\"]:checked");
                if (checked.length < 3) {
                    checked.each(function (i, e) {
                        values.push($(e).val());
                        val_id.push($(e).prop("id"));
                    });
                } else {
                    values.push($(this).val());
                    val_id.push($(this).prop("id"));
                }
                $("input#list").val(values.join(","));
                $("input#val_id").val(val_id.join(","));
            });
        });
    </script>
</head>
<body>
    <input id="list" type="text" name="list">
    <input id="val_id" type="text" name="val_id">
    <input type="checkbox" name="ckb" value="A1" id="1">
    <input type="checkbox" name="ckb" value="A2" id="2">
    <input type="checkbox" name="ckb" value="A3" id="3">
</body>
</html>

そしてフィドル：http://jsfiddle.net/df59H/

そして、ボックスをクリアする必要がある場合:

$("#someButtonId").click(function(){
    $("input#list").val("");
    $("input#val_id").val("");
});
于 2013-04-05T01:21:12.713 に答える
0

入力の手間を省く (そしてエラーの可能性を減らす) には、ループを使用して要素にアクセスする必要があります。

for (var i=1; i<7; i++) {

  if (document.getElementById(i).checked) {
    values.push('A' + i);
    val_id.push('' + 1);
  }
}

要素がフォーム内にある場合は、 getElementByIdを複数回呼び出すのではなく、フォームの名前付きプロパティとしてアクセスすることを検討してください。

var form = document.getElementById(formID);
...

ただし、そのためには、コントロールのインデックスとの衝突を避けるために数字ではない名前を割り当てる必要があるため、名前を「input_1」などに変更すると、次のことができます。

  if (form['input_' + i].checked) {

「テキストボックス」（入力タイプのテキストまたはテキストエリア要素のいずれかであると推測します）の値をデフォルトに設定するには：

textbox.value = textbox.defaultValue;
textbox1.value = textbox1.defaultValue;

配列を「クリア」するには、長さを 0 に設定します。

values.length = 0;

または、新しい配列に置き換えるだけです

values = [];

配列が複数の変数によって参照されている場合は、最初に実行します。それ以外の場合は、どちらでもかまいません。

于 2013-04-05T01:18:22.873 に答える