Question

我有一组名为'periodType'的单选按钮。该组中有一个单选按钮，其行为与其他按钮的行为方式相同，只是它显示了一个额外的div。如何检查特定单选按钮的时间，因为下面的更改功能对于组中的所有单选按钮都非常通用：

  $('input[name="periodType"]').change(function() {
        if(this.checked) {
            //do something (for all radio buttons)
            //If unique radio button also do this
        }
    }); 

    <input type="radio" name="periodType" default>
<input type="radio" name="periodType" default>
<input type="radio" name="periodType" default>
<input type="radio" name="periodType" default>

Answer 1

您可能想要为收音机输入添加值：

<input type="radio" name="periodType" value="one" default>
<input type="radio" name="periodType" value="two" default>
<input type="radio" name="periodType" value="three" default>
<input type="radio" name="periodType" value="four" default>

然后查询该值：

$('input[name="periodType"]').change(function() {
  if (this.value == 'three' && this.checked) {
    //do something (for all radio buttons)
    //If unique radio button also do this
  }
});

Answer 2

$('input[name="periodType"]').change(function() {
        if(this.checked) {
            //do something (for all radio buttons)
            //If unique radio button also do this
           var idval = $(this).attr("id");
           if (idval == "something")
           {
             //do something
            }
        }
    });

Answer 3

可能你正在寻找这样的东西。我已将每个收音机添加到其自己的div中，以显示更改时的行为。如果您有任何问题，请与我们联系。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <title></title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

        <style type="text/css">
            .selected{background-color: #fad42e;}
            .notSelected{background-color: #6f6e73;}
        </style>
        <script type="text/javascript">


            $(document).ready(function () {


                $('input[name="periodType"]').change(function() {
                    $(this).parent('div').removeClass();
                    $(this).parent('div').addClass('selected');

                    $('input[name="periodType"]')
                            .parent('div')
                            .not($(this).parent("div"))
                            .each(function(e){
                                $(this).removeClass();
                                $(this).addClass("notSelected");
                            });
                });



            });




        </script>
    </head>
    <body>

    <div>
        <input type="radio" name="periodType" >
    </div>
    <div>
        <input type="radio" name="periodType" >
    </div>
    <div>
        <input type="radio" name="periodType" >
    </div>
    <div>
        <input type="radio" name="periodType" >
    </div>

    </body>
    </html>

获取Jquery中单选按钮组的id

3 个答案: