如何实现html多选项复选框的selectAll功能?

我正在实现html多选项复选框元素,我从fiddle找到了以下代码片段。https:/jsfiddle.netKyleMitmqcp7f3s413。).我想添加一个selectAll复选框来一次选择所有的复选框.同时我也想获得所选的复选框的值.但selectAll功能无法使用。

HTML:

<h3>Font Awesome</h3>
<select id="animals" multiple="" class="form-control select-checkbox-fa" size="5">
  <option>Dog</option>
  <option>Cat</option>
  <option>Hippo</option>
  <option>Dinosaur</option>
  <option>Another Dog</option>
</select>


<button id="selectall">Click</button>

</button>

CSS:

body {
  padding: 15px;
}

.select-checkbox option::before {
  content: "\2610";
  width: 1.3em;
  text-align: center;
  display: inline-block;
}
.select-checkbox option:checked::before {
  content: "\2611";
}

.select-checkbox-fa option::before {
  font-family: FontAwesome;
  content: "\f096";
  width: 1.3em;
  display: inline-block;
  margin-left: 2px;
}
.select-checkbox-fa option:checked::before {
  content: "\f046";
}

Jquery:

$('option').mousedown(function(e) {
    e.preventDefault();
    var originalScrollTop = $(this).parent().scrollTop();
    console.log(originalScrollTop);
    $(this).prop('selected', $(this).prop('selected') ? false : true);
    var self = this;
    $(this).parent().focus();
    setTimeout(function() {
        $(self).parent().scrollTop(originalScrollTop);
    }, 0);

    return false;
});


$('#selectall').click( function() {
   $('#animals').each(function() {
        var checkboxes = $(this).find("option:checked");
        checkboxes.each(function() {

             $(this).prop('selected', true);

        });
    });
});

解决方案:

请检查这个

$('#selectall').click(function () {    
    $('#animals option').prop('selected', true);  
 });
 
 $('#getValues').click(function () {    
  console.log("JHGHJ", $('#animals :selected').text());
 });
 
body {
  padding: 15px;
}

.select-checkbox option::before {
  content: "\2610";
  width: 1.3em;
  text-align: center;
  display: inline-block;
}
.select-checkbox option:checked::before {
  content: "\2611";
}

.select-checkbox-fa option::before {
  font-family: FontAwesome;
  content: "\f096";
  width: 1.3em;
  display: inline-block;
  margin-left: 2px;
}
.select-checkbox-fa option:checked::before {
  content: "\f046";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Font Awesome</h3>
<select id="animals" multiple="" class="form-control select-checkbox-fa" size="5">
  <option>Dog</option>
  <option>Cat</option>
  <option>Hippo</option>
  <option>Dinosaur</option>
  <option>Another Dog</option>
</select>


<button id="selectall">select All </button>
<button id="getValues">get Values</button>

</button>

给TA打赏
共{{data.count}}人
人已打赏
未分类

为什么我不能解开(融化)这个熊猫数据框架(python)

2022-9-8 18:12:03

未分类

我如何在SQL中添加数值到count?

2022-9-8 18:12:05

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索