Question

我的代码是：

var odoo = new Odoo({
  url: 'x.y.z.com',
  port: 80,
  db: 'Data_Base',
  username: 'username',
  password: 'password'
});

如果我点击复选框。然后它应该在顶部。如何使用jquery？

Answer 1

尝试此代码...点击复选框后，如果是checked，则会向上移动到列表中的第一个位置。

我正在使用attribute selector在没有课程的情况下执行此操作...

$("[type='checkbox']").on("click",function(){
  if( $(this).is(":checked") ){
    $("li").first().before( $(this).closest("li") );
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="ui-multiselect-checkboxes ui-helper-reset" style="height: 175px;">
  <li class=" ">
    <label for="ui-multiselect-tar-option-0" title="" class="ui-corner-all">
      <input id="ui-multiselect-tar-option-0" name="multiselect_name" value="Abkhazian" title="Abkhazian" type="checkbox">
      <span>Abkhazian</span>
    </label>
  </li>
  <li class=" ">
    <label for="ui-multiselect-tar-option-1" title="" class="ui-corner-all">
      <input id="ui-multiselect-tar-option-1" name="multiselect_name" value="Afar" title="Afar" type="checkbox">
      <span>Afar</span></label>
  </li>
  <li class=" ">
    <label for="ui-multiselect-tar-option-2" title="" class="ui-corner-all ui-state-hover">
      <input id="ui-multiselect-tar-option-2" name="mmultiselect_name" value="Afrikaans" title="Afrikaans" type="checkbox">
      <span>Afrikaans</span>
    </label>
  </li>
  <li class=" ">
    <label for="ui-multiselect-tar-option-3" title="" class="ui-corner-all">
      <input id="ui-multiselect-tar-option-3" name="multiselect_name" value="Albanian" title="Albanian" type="checkbox">
      <span>Albanian</span>
    </label>
  </li>
  <li class=" ">
    <label for="ui-multiselect-tar-option-4" title="" class="ui-corner-all">
      <input id="ui-multiselect-tar-option-4" name="multiselect_name" value="Amharic" title="Amharic" type="checkbox">
      <span>Amharic</span></label>
  </li>
</ul>

Answer 2

您可以使用.prependTo()将其移至顶部。

$("input[id^=ui-multiselect-tar-option-]").click(function() {
  if ($(this).is(":checked")) {
    $(this).closest("li").prependTo(".ui-multiselect-checkboxes");
  }
})

<强>演示

$("input[id^=ui-multiselect-tar-option-]").click(function() {
  if ($(this).is(":checked")) {
    $(this).closest("li").prependTo(".ui-multiselect-checkboxes")
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="ui-multiselect-checkboxes ui-helper-reset" style="height: 175px;">
  <li class=" ">
    <label for="ui-multiselect-tar-option-0" title="" class="ui-corner-all">
        <input id="ui-multiselect-tar-option-0" name="multiselect_name" value="Abkhazian" title="Abkhazian" type="checkbox"><span>Abkhazian</span></label>
  </li>
  <li class=" ">
    <label for="ui-multiselect-tar-option-1" title="" class="ui-corner-all">
        <input id="ui-multiselect-tar-option-1" name="multiselect_name" value="Afar" title="Afar" type="checkbox"><span>Afar</span></label>
  </li>
  <li class=" ">
    <label for="ui-multiselect-tar-option-2" title="" class="ui-corner-all ui-state-hover">
        <input id="ui-multiselect-tar-option-2" name="mmultiselect_name" value="Afrikaans" title="Afrikaans" type="checkbox"><span>Afrikaans</span></label>
  </li>
  <li class=" ">
    <label for="ui-multiselect-tar-option-3" title="" class="ui-corner-all">
        <input id="ui-multiselect-tar-option-3" name="multiselect_name" value="Albanian" title="Albanian" type="checkbox"><span>Albanian</span></label> </li>
  <li class=" ">
    <label for="ui-multiselect-tar-option-4" title="" class="ui-corner-all">
        <input id="ui-multiselect-tar-option-4" name="multiselect_name" value="Amharic" title="Amharic" type="checkbox"><span>Amharic</span></label>
  </li>

在jquery中使用类名对li列表进行排序？

2 个答案: