0

我想在单击下拉列表时删除选中的复选框并选中下拉列表上的复选框。例如我有这个代码

<input id="item-1" type="checkbox">item1</input>
<input id="item-2" type="checkbox">item2</input>
<input id="item-3" type="checkbox">item3</input>

<select id="dropdown">
   <option value="1,2">check the item 1 and 2</option>
   <option value="1,3">check the item 1 and 3</option>
   <option value="1,2,3">check the item 2 and 3</option>
</select>

这是我的jQuery代码

$('#dropdown').live("change", function() {
    //remove all the chekced checkboxes
    $('input:checkbox').removeAttr('checked');
    //check chekboxes
    var selected = $('#dropdown :selected').val();
    dataitem = selected.split(',');
    $.each(dataitem, function(key, item) {
        $('#item-' + item).attr('checked', true);
    });
});

这里发生的是当我添加这段代码时

$('input:checkbox').removeAttr('checked');

它将删除所有选中的复选框，但当我在下拉列表中选择时它不会添加。但是当我删除该代码时，它会检查一个复选框，但不会在以前选中的复选框上删除。

4

2 回答 2

2

对我来说似乎工作得很好，我只是注意到这<option value="1,2,3">与文本不一致并将其更改为<option value="2,3">.

见：http ://codepen.io/AlienHoboken/pen/knCHh

于 2013-01-15T12:24:43.120 回答
0 
      <input id="item-1" type="checkbox">item1</input>  
      <input id="item-2" type="checkbox" value="item2">
       <input id="item-3" type="checkbox" value="item3">

     <select id="dropdown">
       <option value="1,2">check the item 1 and 2</option>
        <option value="1,3">check the item 1 and 3</option>
      <option value="2,3">check the item 2 and 3</option>
     </select>


     $('#dropdown').live("change", function() {
     //remove all the chekced checkboxes
     $('input:checkbox').attr('checked', false);
        //check chekboxes
     var selected = $('#dropdown :selected').val();
     dataitem = selected.split(',');
     $.each(dataitem, function(key, item) {
           $('#item-' + item).attr('checked', true);
         });
     });
于 2013-01-15T12:27:54.377 回答