0

コード スニペットの行を表すチェックボックスのグループがあります。チェックボックスを2回クリックするだけで(コードの最初と最後の行で)そのコードの一部を選択し、中央のコードをチェックして、選択の開始行と終了行で2つの入力フィールドを設定したいと思います。これが私のコードですが、まったく機能していないようです。

HTMLコード

<div id="example">    
     <input type="checkbox" name="box1" id="box1">
     <label for="box1"> code line 1 </label>
     <input type="checkbox" name="box2" id="box2">
     <label for="box2"> code line 2 </label>
     <input type="checkbox" name="box3" id="box3">
     <label for="box3"> code line 3 </label>
     <input type="checkbox" name="box4" id="box4">
     <label for="box4"> code line 4 </label>
     <input type="checkbox" name="box5" id="box5">
     <label for="box5"> code line 5 </label>  
</div>
<form name="addhint" method="post" action="">
     <input type="hidden" name="start" value="0">
     <input type="hidden" name="stop" value="0">
     [...]
</form>

Jクエリコード

$('#example input:checkbox').click(function() {
var $this = $(this);
var $id= $this.id;
if ($this.is(':checked')) {
    if ($('#form input[name=start]').val() == 0) {
        $('#form input[name=start]').val($id);
    }
    else {
         var $start= $('input[name=start]').val();
         if ($id - $start > 1) {
            for ($i = $start+1; $i < $id; $i++) {
                 $('#example input[id=box'+$i+']').attr('checked', true);
                 $('#example input[id=box'+$i+']').attr('disabled', 'disabled');
            }
            $('#form input[name=stop]').val($id);
         }
    }
} else {
       // do other stuff
}
});

チェックボックスをクリックしても何も起こりません。jQuery を使用するのは初めてなので、多くのことが間違っている可能性があります。私を殺さないでください.. :)

4

4 に答える 4

0

働くフィドル

HTML

js でフォームの id を使用していたが定義されていなかったため、フォームに id を追加しました。

<form id="form" name="addhint" method="post" action="">

js

$('#example input:checkbox').click(function () {
    var $this = $(this);
    var $id = this.id; //change here 
    if ($this.is(':checked')) {
        if ($('#form input[name=start]').val() == 0) {
            $('#form input[name=start]').val($id);
        } else {
            var $start = $('input[name=start]').val();
            if ($id - $start > 1) {
                for ($i = $start + 1; $i < $id; $i++) {
                    $('#example input[id=' + $i + ']').attr('checked', true);
                    $('#example input[id=' + $i + ']').attr('disabled', 'disabled');
                }
                $('#form input[name=stop]').val($id);
            }
        }
    } else {
        // do other stuff
    }
});

かわった

var $id = $this.id;

var $id = this.id; //or you can use var $id = $this.attr('id');
于 2013-11-07T09:39:48.687 に答える
0

ID を数値だけにすることはできません。

ID の表記規則:

少なくとも 1 文字が含まれている必要があります

スペース文字を含めることはできません

ID 名を数字で始めないでください

試す:

$('#example input:checkbox').click(function() {
var $this = $(this);
var $id= this.id;
$id = $id.substr(3);//because you have id like box1 so remove box and get 1
if ($this.is(':checked')) {
    if ($('#form input[name=start]').val() == 0) {
        $('#form input[name=start]').val($id);
    }
    else {
         var $start= $('input[name=start]').val();
         if ($id - $start > 1) {
            for ($i = $start+1; $i < $id; $i++) {
                 $('#example input[id=box'+$i+']').attr('checked', true);
                 $('#example input[id=box'+$i+']').attr('disabled', 'disabled');
            }
            $('#form input[name=stop]').val($id);
         }
    }
} else {
       // do other stuff
}
});
于 2013-11-07T09:33:40.607 に答える
0

jQuery コードでエラーが発生しました:

var $this = $(this);
var $id= $this.id;

$thisjQuery オブジェクトの場合は$this.id未定義です。そのはず

var $id=$this.attr('id');

また

var $id=this.id;
于 2013-11-07T09:43:05.413 に答える