0

我有一组复选框，它们代表代码片段中的行。我很想通过两次单击（在代码的第一行和最后一行）复选框来选择该代码的一部分，检查中间的代码并设置两个输入字段以及选择的开始行和结束行。这是我的代码，但它似乎根本不起作用。

代码

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

查询代码

$('#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

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
}
});
于 2013-11-07T09:33:40.607 回答
0

工作小提琴

HTML

将 id 添加到表单中，因为您在 js 中使用表单的 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

您的 jQuery 代码中出现错误：

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

if$this是一个 jQuery 对象，$this.id是未定义的。它应该是

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

或者

var $id=this.id;
于 2013-11-07T09:43:05.413 回答
0

我建议使用下划线（或类似的）将“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/

于 2013-11-07T10:50:33.477 回答