判断radio、checkbox单复选框是否被选中(原生js和jquery两种方法)

阅读() @2018-10-29 18:16:06

在做用户注册或者是用户信息修改页面的时候,都会让用户自己去选择自己的性别等等,而这种选择都是单选项,所以用户选择完成之后,点击提交按钮,要把最后选择的结果提交给后台数据库存储,下面我用原生javascript和jquery两种方法来写一下这个效果(实际上就是获取到被选中的那个单选框的value值)。

HTML部分:

<form action="" method="post" id="validate">
	<input type="radio" name="sex" value="男" class="choose" />男
	<input type="radio" name="sex" value="女" class="choose" />女
	<input type="submit" id="btn" value="提交">
</form>

第一种:原生javascript获取单选框radio的值:

<script type="text/javascript">
    var choose = document.getElementsByClassName("choose");
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        for(var i=0; i<choose.length; i++){
            if(choose[i].checked){
                alert(choose[i].getAttribute("value"));
            }
        }
    }
</script>

第二种:用Jquery获取单选框radio的值:

<script type="text/javascript" src="http://www.zymseo.com/js/demo.js"></script>
<script type="text/javascript">
	$("#validate").bind("submit",function(){
		alert($(".choose:checked").val());
	})
</script>

当我们在用JS来实现web端操作的时候,多选框的全选、全不选和反选是最常用的功能,尤其是当数据量大的时候就需要这样的批量操作来给用户带来方便、快捷的服务了。

下面我们就来用JQuery实现checkbox多选框的全选、全不选、反选的功能:

假设有4个checkbox多选框,他们包含在一个id=“chk”的div中,而全选、全不选、反选的button按钮所在标签的id分别为btnAllChk、btnAllNotChk、btnInvert。

具体代码如下:

$(function () {

    //全不选

     $("#btnAllNotChk").click(function () {

        $("#chk input:checkbox").removeAttr("checked");

     });

    //全选

     $("#btnAllChk").click(function () {

        $("#chk input:checkbox").attr("checked", "checked");

     });

     //反选

      $("#btnInvert").click(function () {

        //1.方法一实现反选                   

          $("#chk input:checkbox").each(function () {

            this.checked = !this.checked;

         })

         //2.方法二实现反选                

          //  $("#chk input:checkbox").each(function (){                

        //      if ($(this).attr("checked")) {                

        //         $(this).attr("checked", false);                

        //      }                

        //      else {                

        //         $(this).attr("checked", "checked");                

        //      }                

        //   })                

        //3.方法三实现反选 

         //  var $cks = $("#chk input:checkbox");

        //  for (var i = 0; i < $cks.length; i++) {

        //     $cks.get(i).checked = !$cks.get(i).checked;

        //  }

    });

})

在实际的项目中,很多时候input框都是用js动态生成并且加载的html中的,而且需要判断某个单选框或者是复选框是否是选中状态,或者是将它设置为选中状态或取消选中状态,这个时候用true或false要比setAttribute好用,代码如下:

html部分:

<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<button id="reverseChoose">反选</button>
<button id="chooseAll">全选</button>
<button id="cancelChooseAll">取消全选</button>

javascript部分:

var oInpt = document.getElementsByTagName('input');
var oInptLen = oInpt.length;
//全选
var oChooseAll = document.getElementById('chooseAll');
oChooseAll.onclick = function(){
	for(var i=0;i<oInptLen;i++){
		oInpt[i].checked = true;
	}
}
//取消全选
var oCancelChooseAll = document.getElementById('cancelChooseAll');
oCancelChooseAll.onclick = function(){
	for(var i=0;i<oInptLen;i++){
		oInpt[i].checked = false;
	}
}
//反选
var oReverseChoose = document.getElementById('reverseChoose');
oReverseChoose.onclick = function(){
	for(var i=0;i<oInptLen;i++){
		oInpt[i].checked = !oInpt[i].checked;
	}
}

比较一下,jquery方法更加简单方便,一段代码就能搞定!

微信二维码