Question

我想在点击下拉列表时删除选中的复选框，然后选中下拉列表中的复选框。例如，我有这个代码

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

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

Answer 1

似乎对我很好，我只是注意到<option value="1,2,3">与文字不一致，并将其更改为<option value="2,3">。

请参阅：http://codepen.io/AlienHoboken/pen/knCHh

Answer 2

      <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);
         });
     });

单击下拉列表时取消选中并选中复选框

2 个答案: