導航:首頁 > 編程語言 > js實現多選框反選

js實現多選框反選

發布時間:2021-02-28 02:16:16

A. javascript如何實現一組復選框反選

var authorities = document.getElementsByName("authorities");
for (var i=0;i<authorities.length;i++)
{
authorities[i].checked=!authorities[i].checked;
}

B. js解決checkbox全選和反選的問題

<script>
functionSelectAll(){
varcheckboxs=document.getElementsByName("choose");
for(vari=0;i<checkboxs.length;i++){
vare=checkboxs[i];
e.checked=!e.checked;
}
}
</script>

<inputtype="checkbox"name="choose">跳舞
<inputtype="checkbox"name="choose">跳水
<inputtype="checkbox"name="choose"/>跳棋
<inputtype="checkbox"name="choose"/>跑步內<br/>
<inputtype="checkbox"name="allChecked"id="allChecked"onclick="SelectAll()"/>全選/取消容

C. 如何用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];
?>

D. js實現checkbox全選、不選與反選的方法

本文實例講述了js實現checkbox全選、不選與反選的方法。分享給大家供大家參考。具體分析如下:
一、思路:
1.
獲取元素
2.
給全選
不選
反選添加點擊事件
3.
用for循環checkbox
4.
把checkbox的checked設置為true即實現全選
5.
把checkbox的checked設置為false即實現不選
6.
通過if判斷,如果checked為true選中狀態的,就把checked設為false不選狀態,如果checked為false不選狀態的,就把checked設為true選中狀態。
二、html代碼
<input
type="button"
value="全選"
id="sele"/>
<input
type="button"
value="不選"
id="setinterval"/>
<input
type="button"
value="反選"
id="clear"/>
<div
id="checkboxs">
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<input
type="checkbox"/><br
/>
<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>
三、js代碼:
<script>
window.onload=function(){
var
sele=document.getElementById('sele');//獲取全選
var
unsele=document.getElementById('setinterval');//獲取不選
var
clear=document.getElementById('clear');//獲取反選
var
checkbox=document.getElementById('checkboxs');//獲取div
var
checked=checkbox.getElementsByTagName('input');//獲取div下的input
//全選
sele.onclick=function(){
for(i=0;i<checked.length;i++){
checked[i].checked=true
}
}
//不選
unsele.onclick=function(){
for(i=0;i<checked.length;i++){
checked[i].checked=false
}
}
//反選
clear.onclick=function(){
for(i=0;i<checked.length;i++){
if(checked[i].checked==true){
checked[i].checked=false
}
else{
checked[i].checked=true
}
}
}
}
</script>
希望本文所述對大家的javascript程序設計有所幫助。

E. javascript 復選框反選怎麼做 正選可以了

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title></title>
<script>
window.onload = function(){
var obtn1 = document.getElementById('btn1');
var obtn2 = document.getElementById('btn2');
var obtn3 = document.getElementById('btn3');
var odiv = document.getElementById('div1');
var ocheck = odiv.getElementsByTagName('input');

obtn1.onclick = function(){ //全選
for(var i=0;i<ocheck.length;i++){
ocheck[i].checked = true;
}
};

obtn2.onclick = function(){ //不選
for(var i=0;i<ocheck.length;i++){
ocheck[i].checked = false;
}
};

obtn3.onclick = function(){ //反選
for(var i=0;i<ocheck.length;i++){
ocheck[i].checked = !ocheck[i].checked;
}
};
}
</script>
</head>
<body>
<input type="button" id="btn1" value="全選" />
<input type="button" id="btn2" value="不選" />
<input type="button" id="btn3" value="反選" />
<div id="div1">
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<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>

F. js控制復選框進行反選時,為什麼這種方式不行。【我知道如果checked屬性用true/false是w3c標准方法可行。

通過來給 checked 屬性復制,只要自 checked 存在,無論是任何值都表示選中。

<inputtype='checkbox'checked/>

這才是 W3C 的標准。注意到沒有?checked 屬性其實並沒有等於號賦值,因為實際上它等於啥都無所謂,只要存在這個屬性就是表示選中。

Obox[i].checked='';//選中
Obox[i].checked='checked';//選中
Obox[i].checked='true';//選中
Obox[i].checked='false';//選中
Obox[i].checked=true;//選中
Obox[i].checked=false;//取消選中

input 標簽中同理的還有 readonly、autofocus 之類的屬性。

G. js怎麼控制多個復選框的選中和取消選中

//導入包 <script type="text/javascript" src="admin/a/js/jquery-1.8.0.min.js"></script>

//全選內容反選
$("#chkAll").click(function()
{

if($(this).prop("checked"))
{
$("input[type='checkbox']").prop("checked",true);

$("#chkAll").html("");
}
else
{
$("input[type='checkbox']").prop("checked",false);
$("#chkAll").html("");
}}
)

H. js的全選反選(兩組復選框)

jquery 兩行搞定
$("input[name='a[]']").attr('checked', true); 所有name為a[]的都選內中容
$("input[name='b[]']").attr('checked', false); 所有name為b[]的都取消選中

I. js實現多選框選中

<HTML>
<HEAD>
<scripttype="text/javascript"src="./jquery-1.11.1.js"></script>
<scripttype="text/javascript">

$(function(){
varcheckbox=$("#test:checkbox");
$("#test:checkbox").click(function(){
varopchek=$(this);
varlevel=parseInt(opchek.attr("level"));
$.each(checkbox,function(){
var_this=$(this);
if(parseInt(_this.attr("level"))<level){
if(opchek.prop("checked")){
_this.prop("checked",true);//這個方法好像是1.8+的jquery才有的
_this.attr("disabled",true);
}else{
varprevLevel=level-1;
$("#test:checkbox[level='"+prevLevel+"']").attr("disabled",false);
}

}
});
});
});
</script>
</HEAD>
<BODY>
<divid="test">
<inputtype="checkbox"id="a"level="1">查看</input>
<inputtype="checkbox"id="b"level="2">添加</input>
<inputtype="checkbox"id="c"level="3">修改</input>
<inputtype="checkbox"id="d"level="4">完全控制</input>
</div>
</BODY>
</HTML>

閱讀全文

與js實現多選框反選相關的資料

熱點內容
哪些渠道可以查看行業數據 瀏覽:88
無需下載免費在線觀看電影 瀏覽:230
真實里的馬尾女叫什麼名字 瀏覽:548
電腦網線區域網傳輸文件 瀏覽:805
win8文件批量重命名 瀏覽:843
大頭兒子小頭爸爸電影全部系列順序 瀏覽:676
iphone4s鑒別 瀏覽:562
365dy 瀏覽:866
林曼曼和么公的小說免費閱讀 瀏覽:609
宜春電影院有幾家 瀏覽:550
天天看下載安卓版本嗎 瀏覽:944
如何用origin處理器epr數據 瀏覽:5
linux內核信號通知上層 瀏覽:590
久久影院看電影的網 瀏覽:874
尋秦記電影版在線觀看 瀏覽:140
紅羊真軍系列有哪些 瀏覽:552
母親懷孕13年不生的外國電影 瀏覽:242
孕婦流產電影大全 瀏覽:775
男主角叫楚天的都市小說 瀏覽:82
葉塵是道士男主的直播流小說 瀏覽:479

友情鏈接