JQueryはradio(単一選択ボックス)が選択されているかどうかを判定し、選択値を取得する方法をまとめます。

4808 ワード

まずみんなに分けます
JQueryはradioの単一選択ボックスが選択されているかどうかを判断して、値を取る方法です。
https://www.jb51.net/article/154840.htm
一、選択値を取得して選択を判断する
直接コードを入れて、JQueryバッグを参照することを忘れないでください。



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>JQuery radio</title>

<script type="text/javascript" language="javascript" src="JavaScript/jquery-1.6.1.min.js" ></script>

<script type="text/javascript" language="javascript">

 /*------  radio     ，      --------*/

    $(function(){

         $("#btnSubmit").click(function(){

            var val=$('input:radio[name="sex"]:checked').val();

            if(val==null){

                alert("      !");

                return false;

            }

            else{

                alert(val);

            }

            var list= $('input:radio[name="list"]:checked').val();

            if(list==null){

                alert("     !");

                return false;

            }

            else{

                alert(list);

            }           

         });

     });

</script>

</head>

 

<body>

<form id="form1" >

<input type="radio"  name="sex" value=" " /> 

<input type="radio" name="sex" value=" " /> 

<br />

<input type="radio"  name="list" value="    " />    

<input type="radio" name="list" value="  " />  

<input type="radio" name="list" value="   " />   

<input type="radio" name="list" value="   " />   

<br />

<input type="submit" value="submit"  id="btnSubmit" />

</form>

</body>

</html>

radioは「checked」と同等に判断できず、trueだけで判断します。



<script type="text/javascript">

        $(function () {

            $("input").click(function () {

                if ($(this).attr("checked")) {

                    alert("   ");

                }

            });

        });

    </script>

</head>

<body>

<input type="radio"/>

</body>

</html>

二、checked属性で選択を判断する
radioは「checked」と同等に判断できず、trueだけで判断します。



<script type="text/javascript">

        $(function () {

            $("input").click(function () {

                if ($(this).attr("checked")) {

                    alert("   ");

                }

            });

        });

    </script>

</head>

<body>

<input type="radio"/>

</body>

</html>

三、jqueryはラジオのラジオボタンの値を取得します。



$("input[name='items']:checked").val();

また、ラジオが選択されているかどうかを判断し、選択された値を取得します。

以下の通りです



function checkradio(){ 

var item = $(":radio:checked"); 

var len=item.length; 

if(len>0){ 

  alert("yes--     ："+$(":radio:checked").val()); 

} 

}

四、ラジオのセットの選択されたアイテムの値を取得します。


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

五、ラジオボタンの設定が選択されています。



$("input[type=radio]").attr("checked",'2');//  value=2