Question

我有一组复选框，表示代码段中的行。我只想在复选框上单击两次（在代码的第一行和最后一行）选择该代码的一部分，检查中间的代码并设置两个输入字段，其中包含选择的起始和结束行。这是我的代码，但似乎根本不起作用。

HTML CODE

<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>

JQUERY CODE

$('#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这么多东西都可能是错的。只是不要杀了我.. :)

Answer 1

ID不能单独为数字。

ID惯例：

必须至少包含一个字符

不得包含任何空格字符

请勿使用数字
启动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
}
});

Answer 2

Working Fiddle

<强> 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');

Answer 3

您的jQuery代码中出现错误：

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

如果$this是jQuery对象，则$this.id未定义。它应该是

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

或

var $id=this.id;

Answer 4

我建议将“box”与带有下划线（或类似内容）的数字ID分开，以便轻松分离前缀和实际数字ID，如下所示：

<div id="example">    
     <input type="checkbox" name="box_1" id="box_1">
     <label for="box_1"> code line 1 </label>
     <input type="checkbox" name="box_2" id="box_2">
     <label for="box_2"> code line 2 </label>
     <input type="checkbox" name="box_3" id="box_3">
     <label for="box_3"> code line 3 </label>
     <input type="checkbox" name="box_4" id="box_4">
     <label for="box_4"> code line 4 </label>
     <input type="checkbox" name="box_5" id="box_5">
     <label for="box_5"> code line 5 </label>  
</div>
<form name="addhint" method="post" action="">
     <input type="text" name="start" id="start" value="0">
     <input type="text" name="stop" id="stop" value="0">
</form>

您可以使用

$('#example input[type="checkbox"]').filter(':checked').size()

检查检查了多少个复选框并相应地执行操作，这样就可以了：

$('#example input[type="checkbox"]').change(function() {
    var count_checked = $('#example input[type="checkbox"]').filter(':checked').size()
    , start
    , stop;

    $('#example').find('[disabled="disabled"]').removeAttr('disabled');

    if (count_checked > 1) { // start and stop selected
        var id1 = $('#example input:checkbox').filter(':checked').first().attr('id').split('_')[1]
          , id2 = $('#example input:checkbox').filter(':checked').last().attr('id').split('_')[1];

        start = Math.min(id1, id2)
        stop = Math.max(id1, id2);

        for (i=start+1; i<stop; i++) { // loop through checkboxes between start and stop
            $('#box_'+i).attr('checked','checked').attr('disabled','disabled');
        }

    } else if (count_checked == 1) { // only start selected
        start = $('#example input:checkbox').filter(':checked').first().attr('id').split('_')[1];
        stop = $('#example input:checkbox').last().attr('id').split('_')[1];
    } else { // none selected
        start = 0;
        stop = 0;
    }

    $('#start').val(start);
    $('#stop').val(stop);                                            
});

我为你制作了一个jsfiddle来测试http://jsfiddle.net/8j9eu/2/

通过jQuery和复选框管理表单的输入

4 个答案: