Question

重新提出此问题。我需要从不同的方式来接近它 Show and hide, enable and disable depending on radios and checkboxes

我以下的方式：

首先，我不应该使用单选按钮进行单选按钮。我需要检查是否选中了单选按钮，然后相应地显示电子div或cookware-items div。还需要同时显示单选按钮选项＆＃34;两者＆＃34;检查。
只有选中相应电子产品或炊具项目的复选框时，才会显示电子div和炊具项目div中用于输入数量的文本框字段。

任何输入？

<html>
    <head>
        <script src="jquery-1.11.0.js"></script>
        <style>
            div{display:none}
        </style>
    </head>
    <body>
        <form>
         <input type="radio" name="household" id   ="electronics" value="electronics">Electronics<br>
         <input type="radio" name="household" id="cookware" value="cookware">Cookware<br>
          <input type="radio" name="household" id="both"  value="both">Both<br>
        </form>
        <script>
            $(document).ready(function(){
                $(input[type="radio"]).click(function(){
                    $("#electronics").show;
                });
            });
        </script>
        <div id="electronics">
            <input type="checkbox" value="radio" name="radio">Radio &nbsp;&nbsp;2000&nbsp;&nbsp;<input type="textbox" name="text1"><br>
            <input type="checkbox" value="phone" name="phone">Phone&nbsp;&nbsp;2000&nbsp;&nbsp;<input type="textbox" name="text2"><br>

        <div id="cookware-items">
            <input type="checkbox" value="grinder" name="grinder">Grinder&nbsp;&nbsp;2000&nbsp;&nbsp;<input type="textbox" name="text1"><br>
            <input type="checkbox" value="mixer" name="mixer">Mixer&nbsp;&nbsp;2000&nbsp;&nbsp;<input type="textbox" name="text2"><br>
        </div>
    </body>
</html>

Answer 1

编辑复选框Cookware对cookware-items的价值

使用jquery隐藏并显示如下：

现场演示：http://code.freetuts.net/editor.html?id=241

<!DOCTYPE html>
<html>
    <head>
        <script src="jquery-1.11.0.js"></script>
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <style>
            div{display:none}
        </style>
    </head>
    <body>
        <form>
            <input type="radio" name="household" value="electronics">Electronics<br>
            <input type="radio" name="household" value="cookware-items">Cookware<br>
            <input type="radio" name="household" value="both">Both<br>
        </form>
        <script>
            $(document).ready(function() {
                $('input[name="household"]').click(function() 
                {
                    // Hide 2 divs
                    $('#electronics').hide();
                    $('#cookware-items').hide();

                    // Show by current checkbox
                    var value = $(this).val();
                    if (value == 'both'){
                        $('#electronics').show();
                        $('#cookware-items').show();
                    }
                    else{
                        $('#'+value).show();
                    }
                });
            });
        </script>
        <div id="electronics">
            <input type="checkbox" value="radio" name="radio">Radio &nbsp;&nbsp;2000&nbsp;&nbsp;<input type="textbox" name="text1"><br>
            <input type="checkbox" value="phone" name="phone">Phone&nbsp;&nbsp;2000&nbsp;&nbsp;<input type="textbox" name="text2"><br>
        </div>
        <div id="cookware-items">
            <input type="checkbox" value="grinder" name="grinder">Grinder&nbsp;&nbsp;2000&nbsp;&nbsp;<input type="textbox" name="text1"><br>
            <input type="checkbox" value="mixer" name="mixer">Mixer&nbsp;&nbsp;2000&nbsp;&nbsp;<input type="textbox" name="text2"><br>
        </div>
    </body>
</html>

如果选中单选按钮，则显示div和文本框

1 个答案: