radio,checkbox,select的常用功能

通常使用多选框的时候,会伴有多选,反选,全选,删除这些功能。 这里写了一个完整的。

HTML

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" type="text/css" href="../test.css">
 </head>
 <body>
 <div class="btn-group">
 <button id="add" onclick="addRow()">添加行</button>
 <button id="checkall" onclick="checkall()">全选</button>
 <button id="checkinvert" onclick="inverse()">反选</button>
 <button id="uncheckall" onclick="uncheckall()">全不选</button>
 <button id="del" onclick="delcheck()">删除选中的</button>
 <button id="sub" onclick="sub()">提交</button>
 </div>
 <table id="table" style="width:480px;">
 <thead>
 <th>one</th>
 <th>two</th>
 <th>three</th>
 <th>four</th>
 </thead>
 </table>
 </body>
 <script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
 </html>

js

    <script>
    var count=0;
    function addRow(){
    $("#table").append('<tr><td><input type="checkbox" id="ch_'+count+ '" >'
    +'</td><td > <input type="text" id="na_'+count+ '" ></td>'
    +'<td ><input type="text" id="age_'+count+ '" ></td>'
    +'<td > <input type="text" id="ge_'+count+ '" ></td>'
    +'</tr>');
    count++;
    }
    function checkall(){
    var a=$("input[id^='ch_']:checkbox");
    for(var i=0;i<a.length;i++){
    a[i].checked=true;
    }
    }
    function uncheckall(){
    var a=$("input[id^='ch_']:checkbox");
    for(var i=0;i<a.length;i++){
    a[i].checked=false;
    }
    }
    function delcheck(){
    var d=$("input[id^='ch_']");
    d.each(function(){
    if($(this).is(":checked")){
    $(this).parent().parent().remove();}
    })
    }
    function sub(){
    var objs=[];
    $("input[id^=ch_]:checkbox").each(function(){
    if($(this).is(":checked")){
    var id=$(this).attr("id");
    var str=id.substring(3,4);
    var obj=new Object();
    obj.na=$("#na_"+str).val();
    obj.age=$('#ge_'+str).val();
    obj.ge=$('#age_'+str).val();
    objs.push(obj);
    }
    })
    }
    function inverse(){
    var a=$("input[id^=ch_]:checkbox");
    a.each(function(){
    if($(this).is(":checked")){
    $(this).prop("checked",false);
    }
    else{
    $(this).prop("checked",true);
    }}
    );
    }
    </script>  

jquery取radio单选按钮的值

$(“input[name=’items’]:checked”).val();
另:判断radio是否选中并取得选中的值

如下所示: function checkradio(){ var item = $(“checked”); var len=item.length; if(len>0){ alert(“yes–选中的值为:”+$(“checked”).val()); } }

jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关

获取一组radio被选中项的值

var item = $(‘input[name=items][checked]’).val();

获取select被选中项的文本

var item = $(“select[name=items] option[selected]”).text();

select下拉框的第二个元素为当前选中值

$(‘#select_id’)[0].selectedIndex = 1;

radio单选组的第二个元素为当前选中值

$(‘input[name=items]’).get(1).checked = true;

获取值:

文本框,文本区域:$(“#txt”).attr(“value”);

多选框checkbox:$(“#checkbox_id”).attr(“value”);

单选组radio: $(“input[type=radio][checked]”).val();

下拉框select: $(‘#sel’).val();

控制表单元素:

文本框,文本区域:$(“#txt”).attr(“value”,”);//清空内容

$(“#txt”).attr(“value”,’11’);//填充内容

多选框checkbox: $(“#chk1”).attr(“checked”,”);//不打勾

$(“#chk2”).attr(“checked”,true);//打勾

if($(“#chk1”).attr(‘checked’)==undefined) //判断是否已经打勾

单选组radio: $(“input[type=radio]”).attr(“checked”,’2′);//设置value=2的项目为当前选中项

下拉框select: $(“#sel”).attr(“value”,’-sel3′);//设置value=-sel3的项目为当前选中项

$(“11112222”).appendTo(“#sel”)//添加下拉框的option

$(“#sel”).empty();//清空下拉框

然而:代码应该这样写:

取值:val = $(“#id”)[0].value;
赋值: $(“#id”)[0].value = “new value”;

或者$(“#id”).val(“new value”);

或者这样也可以:val = $(“#id”).attr(“value”);

jQuery中each非常好用,常用它取代javascript的for循环

例如在一个function里有一个each,在each里某种条件 成立的话,就把这个function返回true或者false

function methodone(){ …. $.each(array,function(){ if(条件成立){ return true; } }); …. }

查找资料才发现,在each代码块内不能使用break和continue,要实现break和continue的功能的话,要使用其它的方式 break—-用return false; continue –用return ture;

在each里想使用return true给这个function返回时,其实只是让each继续执行而以 连each都没有中断,所以function也就不能return了

另:判断radio是否选中并取得选中的值

如下所示: function checkradio(){ var item = $(“checked”); var len=item.length; if(len>0){ alert(“yes–选中的值为:”+$(“checked”).val()); } }

欢迎分享本文,转载请保留出处:前端ABC » radio,checkbox,select的常用功能

赞 (1)
分享到:更多 ()

发表评论 0