⑴ 以下代碼里,怎麼樣用JS增添一個刪除鍵,刪除購物車內對應的商品
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
#div_idp{width:80px;height:30px;text-align:left;border:1pxsolid#000;line-height:30px;}
#div_idpbutton{float:right;height:30px;}
</style>
<scriptsrc="js/tool.js"></script>
<script>
window.onload=function(){
vardiv=document.getElementById("div_id");
varbutton=document.getElementsByTagName("button")
for(vari=0;i<button.length-1;i++){
button[i].onclick=function(){
alert("加入購物車成功");
varp=document.createElement("p");
varpContent=document.createTextNode(this.innerHTML);
p.appendChild(pContent);
div.appendChild(p);
vardelBtn=document.createElement("button");
vardelBtnContent=document.createTextNode("x");
delBtn.appendChild(delBtnContent);
p.appendChild(delBtn);
delBtn.onclick=function(){
div.removeChild(p);
}
//setCookie("購物",div.innerHTML,getDate(100))
}
}
varisTrue=false;
varbutton1=document.getElementById("button_id")
button1.onclick=function(){
if(isTrue==false){
button1.innerHTML="隱藏購物車"
isTrue=true;
/*if(getCookie("購物")!=undefined){
div.innerHTML=getCookie("購物");
}*/
div.style.display="block";
}elseif(isTrue){
button1.innerHTML="顯示購物車"
isTrue=false;
div.style.display="none";
/*if(getCookie("購物")!=undefined){
div.innerHTML=getCookie("購物");
div.style.display="none";
}*/
}
}
}
</script>
</head>
<body>
<button>商品1</button>
<button>商品2</button>
<button>商品3</button>
<button>商品4</button>
<button>商品5</button><br/><br/>
<buttonid="button_id">顯示購物車</button>
<divid="div_id"style="display:none;"></div>
</body>
</html>
⑵ 如何用JS實現多選框select的全選和取消全選
你自己改下控制項名字就可以了啊!
下面自己放連個文件試
---
1.php
<script>
function $(id){
return document.getElementById(id);
}
function checkalls(obj,form){
var bool=(obj.checked)?true:false;
for(var i=0;i<form.length;i++){
form.all[i].selected=bool;
}
}
</script>
<form action="2.php" method="post" >
<input type="checkbox" name="checkall" id="checkall" onclick="checkalls(this,$('select'))" checked>全選<br>
<select multiple name="select[]" id="select" size="15" style="width:210px;height:250px">
<option value="1" selected>頓飯大幅度</option>
<option value="2" selected>大幅度</option>
<option value="3" selected>大幅縮</option>
<option value="4" selected>到司法所</option>
</select>
<INPUT TYPE="submit" value="提交">
</form>
---
2.php
<?
echo $select[0];
echo $select[1];
echo $select[2];
echo $select[3];
?>
⑶ 跪求各位js高手,怎麼修改可以刪除全選或選中的內容
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>javascript實現全選</title>
</head>
<body>
<form>
<inputtype="checkbox"id="checkAll"/>全選/全不選
<label><inputtype="checkbox"name="item"value="足球">足球</label>
<label><inputtype="checkbox"name="item"value="籃球">籃球</label>
<label><inputtype="checkbox"name="item"value="排球">排球</label>
</form>
<buttonid="del">刪除</button>
<scripttype="text/javascript">
window.onload=function(){
varcheck_All=document.getElementById("checkAll");
vari_tem=document.getElementsByName("item");
check_All.onclick=function(){
varflag=this.checked;
for(vari=0;i<i_tem.length;i++){
i_tem[i].checked=flag;
}
}
for(vari=0;i<i_tem.length;i++){
i_tem[i].onclick=function(){
varnum=0;
for(varj=0;j<i_tem.length;j++){
if(i_tem[j].checked){
num++;
}
}
check_All.checked=i_tem.length==num?true:false;
}
}
varform=document.getElementsByTagName('form')[0];
vardel=document.getElementById('del');
varlabel=document.getElementsByTagName('label');
del.onclick=function(){
for(vari=i_tem.length-1;i>-1;i--){
if(i_tem[i].checked){
form.removeChild(label[i]);
}
}
}
}
</script>
</body>
</html>
⑷ js寫全選,怎麼取消一個checkbox的選中狀態,讓全選的checkbox選中狀態取消
寫判斷。
1.點擊全選時是把所有的項加上checked
2.獲取這個checked的數量
3.當checked數量不等於全部項的數量時,就把全選按鈕的checked屬性設為false
⑸ 跪求各位js高手,怎麼修改可以把全選或選中的內容刪除
functionselall(obj){
vartems=document.getElementsByName("item");
for(vari=0;i<tems.length;i++){
tems[i].checked=obj.checked;
}
}
functionreverse(){
vartems=document.getElementsByName("item");
for(vari=0;i<tems.length;i++){
tems[i].checked=!tems[i].checked;
}
}
<form>
<inputtype="checkbox"id="checkAll"onclick="reverse();"/>反選
<inputtype="checkbox"id="checkAll"onclick="selall(this);"/>全選/全不選
<inputtype="checkbox"name="item"value="足球">足球
<inputtype="checkbox"name="item"value="籃球">籃球
<inputtype="checkbox"name="item"value="排球">排球
</form>
⑹ js 全選刪除的bug 不能一次性刪完
你的代碼我沒測試,不過自己寫了個測試文件,可以remove掉所有的,你可看看
<!DOCTYPEHTML>
<html>
<head>
<metacharset="UTF-8"/>
<title>Demo</title>
</head>
<scripttype="text/javascript"src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
<styletype="text/css">
.select-all{margin-bottom:10px;}
.item{background:#ccc;padding:5px10px;width:100px;text-align:center;}
.act{margin-top:20px;}
.button{border:1pxsolid#ccc;border-radius:5px;background:#FFA54F;padding:5px10px;text-align:center;text-decoration:none;color:#fff;}
</style>
<body>
<div>
<divclass="select-all">
<inputtype="checkbox"onclick="check_all(this)">全選/全不選
</div>
<divid="list">
<divclass="item"><inputtype="checkbox"name="demo"id="1"value="1">Demo1</div>
<divclass="item"><inputtype="checkbox"name="demo"id="2"value="2">Demo2</div>
<divclass="item"><inputtype="checkbox"name="demo"id="3"value="3">Demo3</div>
<divclass="item"><inputtype="checkbox"name="demo"id="4"value="4">Demo4</div>
<divclass="item"><inputtype="checkbox"name="demo"id="5"value="5">Demo5</div>
<divclass="item"><inputtype="checkbox"name="demo"id="6"value="6">Demo6</div>
<divclass="item"><inputtype="checkbox"name="demo"id="7"value="7">Demo7</div>
<divclass="item"><inputtype="checkbox"name="demo"id="8"value="8">Demo8</div>
</div>
<divclass="act">
<ahref="javascript:;"class="button"onclick='remove_parent()'><span>RemoveParent</span></a>
</div>
</div>
</body>
<scripttype="text/javascript">
functioncheck_all(o){
if(o.checked==true){
$('#listinput[name="demo"]').prop('checked',true);
}else{
$('#listinput[name="demo"]').prop('checked',false);
}
}
functionremove_parent(){
varids=get_checked();
$.each(ids,function(i,n){
if($('#'+n).length>0){
$('#'+n).parent().remove();
alert('Remove成功!');
}else{
alert('Remove失敗!');
}
});
}
functionget_checked(){
varids=newArray();
$.each($('#listinput:checked'),function(i,n){
if($(n).val()!='0'&&$(n).val()!=''){
ids.push($(n).val());
}
});
returnids;
}
</script>
</html>
以下是測試效果圖
希望能幫到你,若有疑問,歡迎追問,望採納,謝謝!~!
⑺ 用JavaScript代碼模擬購物車。
購物車挺復雜的,不是一句兩句能說清的,現在前端都用react,vue這類響應式框架做購物車,事半功倍。
⑻ js做了個簡單的全選 取消全選 與反選出現了小問題求大佬解答!
您好你這個代碼除了一點問題是因為,你再判斷下方的賦值邏輯是錯的專
你可以把
if(aCh[i].checked==true)
{
aCh[i].checked=false;
}
else
{
aCh[i].checked=true;
}
這里改好就行屬了,記住在判斷後是要賦值的,不要對比了再對比
⑼ 用js 實現一個checkbox同時能全選和取消的功能
貼一個自己的代碼供你參考:
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
<scripttype="text/javascript">
window.onload=function(){
function$(id){
returndocument.getElementById(id);
}
varinputArr=document.getElementById("myCBox").getElementsByTagName("input");
functionsel(flag){
for(vari=0;i<inputArr.length;i++){
inputArr[i].checked=flag;
}
}
//全選
$("selAll").onclick=function(){
sel(true);
}
//取消選擇
$("cancelSel").onclick=function(){
sel(false);
}
//反選
$("invertSel").onclick=function(){
for(vari=0;i<inputArr.length;i++){
inputArr[i].checked=!inputArr[i].checked;
}
}
}
</script>
</head>
<body>
<buttonid="selAll">全選</button><buttonid="cancelSel">取消全選</button><buttonid="invertSel">反選</button>
<divid="myCBox">
<div><inputtype="checkbox">測試1</div>
<div><inputtype="checkbox">測試2</div>
<div><inputtype="checkbox">測試3</div>
<div><inputtype="checkbox">測試4</div>
<div><inputtype="checkbox">測試5</div>
<div><inputtype="checkbox">測試6</div>
</div>
</body>
</html>
運行效果:
⑽ 用js在JAVA裡面做一個全選和刪除的功能
var checkboxs = document.getElemenetByName("name")
for(var i=0;i<checkboxs.length;i++){
if(checkbox[i].check==true){
//這個是選中了,自己操作去
}
}
全選的話也用循環,回設置checkbox[i].check=true就可答以了