SOURCE

var checkedCount;

function setItemValue(element, checked) {
    var items = document.getElementsByClassName(element.value);
    var i, item;
    for (i = 0; i < items.length; i++) {
        item = items[i];
        if (checked) {
            item.value += 1;
        } else {
            item.value -= 1;
        };
    }
}

function filter(tagName) {
    var items = document.getElementsByTagName(tagName);
    var i, item;
    for (i = 0; i < items.length; i++) {
        item = items[i];
        if (item.value >= checkedCount) {
            item.style.display = "block";
        } else {
            item.style.display = "none";
        }
    }
}

window.onload = function() {
    checkedCount = 0;
    var inputs = document.getElementsByTagName('input');
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].onclick = function() {
            if (this.checked) {
                checkedCount += 1;
                setItemValue(this, true);
            } else {
                checkedCount -= 1;
                setItemValue(this, false);
            }
            filter("li");
        }
    }
}

<link href="test.css" rel="stylesheet" type="text/css">
<script type="text/javascript" async="" src="test.js"></script>

<div id="filter" class="tips">
        <div><input id="classself" name="filter" type="checkbox" defaultchecked="false" value="classself" /><span>自营</span></div>
        <div><input id="classfullcut" name="filter" type="checkbox" defaultchecked="false" value="classfullcut" /><span>满减</span></div>
        <div><input id="classgive" name="filter" type="checkbox" defaultchecked="false" value="classgive" /><span>满赠</span></div>
    </div>

    <li class="classself   " value="0">
        <a title="敬请期待！" href="#" target="_blank"> <img src="http://img12.360buyimg.com/n7/jfs/t4321/219/3704060006/101650/34a04d56/58e5fa26Ne75d3d3f.jpg" />
            <div class="price">￥1999.00<span></span></div>
            <div class="title">双卡双待</div>
            <div class="hit">敬请期待！</div>
            <div class="tips"><span>自营</span></div>
        </a>
    </li>
    <li class="classself classfullcut classgive " value="0">
        <a title="敬请期待！" href="#" target="_blank"> <img src="http://img12.360buyimg.com/n7/jfs/t4321/219/3704060006/101650/34a04d56/58e5fa26Ne75d3d3f.jpg" />
            <div class="price">￥1999.00<span></span></div>
            <div class="title">双卡双待</div>
            <div class="hit">敬请期待！</div>
            <div class="tips"><span>自营</span><span>满减</span><span>赠</span></div>
        </a>
    </li>
    <li class=" classfullcut classgive " value="0">
        <a title="敬请期待！" href="#" target="_blank"> <img src="http://img12.360buyimg.com/n7/jfs/t4321/219/3704060006/101650/34a04d56/58e5fa26Ne75d3d3f.jpg" />
            <div class="price">￥1999.00<span></span></div>
            <div class="title">双卡双待</div>
            <div class="hit">敬请期待！</div>
            <div class="tips"><span>满减</span><span>赠</span></div>
        </a>
    </li>
    <li class="classself classfullcut  " value="0">
        <a title="敬请期待！" href="#" target="_blank"> <img src="http://img12.360buyimg.com/n7/jfs/t4321/219/3704060006/101650/34a04d56/58e5fa26Ne75d3d3f.jpg" />
            <div class="price">￥1999.00<span></span></div>
            <div class="title">双卡双待</div>
            <div class="hit">敬请期待！</div>
            <div class="tips"><span>自营</span><span>满减</span></div>
        </a>
    </li>

ul {
  clear: both;
}

div {
  margin: 3px;
}

#filter {
  position: fixed;
  right: 6px;
}

li {
  float: left;
  padding: 10px;
  margin: 5px;
  list-style-type: none;
}

a {
  text-decoration: none;
}

li,
li img {
  width: 150px;
}

.tips span {
  display: inline-block;
  overflow: hidden;
  height: 16px;
  padding: 0 2px 0 3px;
  margin-right: 3px;
  background: #E4393C;
  line-height: 16px;
  text-align: center;
  font-size: 12px;
  font-style: normal;
  font-family: SimSun;
  color: #FFF;
  cursor: default;
}

.price {
  color: #e4393c;
  font-size: 20px;
  font-weight: 400;
  font-family: Verdana;
  text-overflow: ellipsis;
}

.title {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 33px;
}

.hit {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: gray;
  font-size: 13px;
  height: 1em;
}

span {
  color: #bbb;
  padding: 0 3px;
  vertical-align: center;
}