購物車怎么實現(xiàn)多選、反選、單選

圖片描述
如何實現(xiàn)多選、反選，單選，謝謝大家

回答

編輯回答

乖乖瀦

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <input type="checkbox">唱歌<br />
    <input type="checkbox">跳舞<br />
    <input type="checkbox">吃飯<br />
    <input type="checkbox">睡覺<br />
    <input type="checkbox">打豆豆<br />
    <button id="all">全選</button>
    <button id="no">全不選</button>
    <button id="fx">反選</button>
</body>
<script src='jquery-2.1.1.min.js'></script>
<script>
    $(function(){
        
         $('#all').on('click',function(){
              $(':checkbox').prop('checked',true)
         })
         
         $('#no').on('click',function(){
              $(':checkbox').prop('checked',false)
         })
         
         $('#fx').on('click',function(){
              $(':checkbox').each(function(){
                   $(this).prop('checked',!$(this).prop('checked'))
              })
         })
    })
</script>

</html>

2017年11月19日 11:32

編輯回答

情已空

后端實現(xiàn): 數(shù)據(jù)庫中每個商品一條記錄有一個 select 字段，表示是否參與訂單結(jié)算,選中為 1 反選為0

前端實現(xiàn):多選的話，遍歷整個購物車結(jié)構(gòu)，將 checkbox 選中屬性選中即可,再發(fā)送ajax請求，告訴服務(wù)端，這個商品選中了，需要修改選中狀態(tài)為 1，其他同理

2018年2月16日 17:42

編輯回答

冷溫柔

抽象成class樣式，比如添加一個css類.selected，
點擊某個商品，檢測它有沒有.selected，有的話就表明之前選擇了，就移除.selected這個類，反之亦然。
全選、全不選，就是移除或添加所有子元素的.selected類，如果，檢測的全部子元素都有.selected類，就表示都選了，把文字提示“全選”改成“全不選”就好了，反之亦然。望采納

2017年1月5日 03:43

編輯回答

清夢

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>案例</title>
<script type="text/javascript">
    window.onload = function(){
    var allCheck = document.getElementById('allBox');
    var otherCheck = document.getElementById('otherCheck');
    var oDiv = document.getElementById('div');
    var Input = oDiv.getElementsByTagName('input');
    var aInput = Input.length;
    
    allCheck.onclick = function(){
    for( var i=0; i<aInput;i++){
        Input[i].checked = this.checked;
        }
    }
    
    
    
    otherCheck.onclick = function(){
    for( var i=0; i<aInput;i++){
        Input[i].checked=!Input[i].checked;
        }
    }    

}
</script>
</head>

<body>
    <input type="checkbox" id="allBox" value="全選/全不選" />全選/全不選<br />
    <input type="checkbox" id="otherCheck" value="反選" />反選<br />
    <p> </p>
    <div id="div">
    <input type="checkbox" />碰瓷哥哈登<br />
    <input type="checkbox" />老漢詹姆斯<br />
    <input type="checkbox" />閃電俠韋德<br />
    <input type="checkbox" />萌寶庫里<br />
    <input type="checkbox" />石佛鄧肯<br />
    <input type="checkbox" />如來湯姆斯<br />
    </div>
</body>
</html>

2017年9月10日 08:49