如何根据主类别的无线电选择更改子类别中的单选按钮?

时间:2013-11-10 00:33:30

标签: javascript php forms

好的,我每个类别都有两个收音机。一个是“允许”,另一个是“被拒绝”。每个类别都有一个子类别。每只子猫都有相同的无线电。我想要做的是,如果有人在主要类别中选择“允许”或“拒绝”,则所有类别子类别都会更改以反映该选择,但允许在子类别中进行独立更改。

使用循环使用PHP和MySQL动态创建每个类别和子类别。我知道我需要为每只主猫添加一个唯一的id给每个子猫。我只是不确定如何去做。

        <ul><!-- main category -->
            <li><b><font size="3">Users:</font></b>
                <p class="radioper"><font color="green"> <b>Allowed</b> </font>
                <input type="radio" name="modusers" value="1" checked="">
                <font color="red"> <b>Denied</b> </font>
                <input type="radio" name="modusers" value="0"></p>
            </li>
            <ul><!--Sub-cat -->
                <li><font size="3">Active Users:</font>
                    <p class="radioper"><font color="green"> <b>Allowed</b> </font>
                    <input type="radio" name="fusract" value="1" checked="">
                    <font color="red"> <b>Denied</b> </font>
                    <input type="radio" name="fusract" value="0"></p>
                </li>
            </ul><!-- End Sub-Cat -->
        </ul><!-- End Main Category -->

1 个答案:

答案 0 :(得分:0)

如果您使用的是jquery 1.6或更高版本,那么这就是解决方案:

你必须根据你的实际情况添加id并分类,但这只是一个例子,

<ul><!-- main category -->
    <li><b><font size="3">Users:</font></b>
        <p class="radioper"><font color="green"> <b>Allowed</b> </font>
            <input id="radio-users-allowed" type="radio" name="modusers" value="1" checked>
            <font color="red"> <b>Denied</b> </font>
            <input id="radio-users-denied" type="radio" name="modusers" value="0"></p>
        </li>
        <ul><!--Sub-cat -->
            <li><font size="3">Active Users:</font>
                <p class="radioper"><font color="green"> <b>Allowed</b> </font>
                    <input class="radio-active-users-allowed" type="radio" name="fusract" value="1" checked>
                    <font color="red"> <b>Denied</b> </font>
                    <input class="radio-active-users-denied" type="radio" name="fusract" value="0"></p>
                </li>
            </ul><!-- End Sub-Cat -->
</ul><!-- End Main Category -->

<script type="text/javascript">
    $('#radio-users-allowed').change(function(){
        $('.radio-active-users-allowed').prop('checked', true);
    });
    $('#radio-users-denied').change(function(){
        $('.radio-active-users-denied').prop('checked', true);
    })
</script>