Question

好的我将我的问题改为两个较小的模块：

1）当我们点击表格中名称为electronics的单选按钮时，应显示最初隐藏了ID为“电子设备”的div。我的jquery函数不正确。有什么指针吗？

2）最初应禁用在div id electronics中输入数量的文本框，然后在用户单击项目名称旁边的复选框时激活该文本框。例如：Radio

我的代码如下：

 <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(){
                        $("div").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>
        </body>
    </html>

Answer 1

为div提供一个类并从无线电中删除ID，因为ID必须是唯一的
将输入文本框的类型修改为type = text。
将click事件添加到复选框
运行复选框onload的测试以禁用/启用文本字段

＆＃13;

$(function () {
  $('input[type="radio"]').on("click",function () {
    $(".selections").hide(); // hide them all
    if (this.value=="both") $(".selections").show(); // show both
    else $("#"+this.value).show(); // show the one with ID=radio value
  });
  $('.selections input[type="checkbox"]').on("click",function() {
//    $(this).next().prop("disabled",!this.checked); // disable if not checked
    $(this).next().toggle(this.checked); // hide if not checked
  });
  $('.selections input[type="text"]').each(function() { // initialise
//      $(this).prop("disabled",!$(this).prev().is(":checked")); 
        $(this).toggle($(this).prev().is(":checked")); 
  });
});

＆＃13;

.selections { display:none }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
    <input type="radio" name="household" value="electronics">Electronics
    <br>
    <input type="radio" name="household" value="cookware">Cookware
    <br>
    <input type="radio" name="household" value="both">Both
    <br>
</form>
<div id="electronics" class="selections">
    <input type="checkbox" value="radio" name="radio">Radio &nbsp;&nbsp;2000&nbsp;&nbsp;
    <input type="text" name="text1">
    <br>
    <input type="checkbox" value="phone" name="phone">Phone&nbsp;&nbsp;2000&nbsp;&nbsp;
    <input type="text" name="text2">
    <br>
</div>

＆＃13;

Answer 2

选择器错误

            $(document).ready(function(){
                $('input[type="radio"]').click(function(){
                    $("div").show();
                });
            });

或

            $(document).ready(function(){
                $(":radio").click(function(){
                    $("div").show();
                });
            });

Answer 3

看起来你选择器是错误的并且显示函数应该是.show()。把这个js代码放在脚本部分。

回答问题1和2

$(document).ready(function(){

    /* question 1 */
   $('input[type="radio"]').click(function(){
            $("div").show();
   });

    /* question 2 */
   $('input[type="checkbox"]').on('click',function(){            

     if($(this).is(':checked'))
     {
        $(this).next().removeAttr('disabled');
     }
     else
     {
        $(this).next().attr('disabled','disabled');
     }

   })
});

这是标记。我改变了一点（在初始开始时隐藏div和禁用输入文本。

<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>

    <div id="electronics" style="display:none">
        <input type="checkbox" value="radio" name="radio">Radio &nbsp;&nbsp;2000&nbsp;&nbsp;<input type="textbox" name="text1" disabled><br>
        <input type="checkbox" value="phone" name="phone">Phone&nbsp;&nbsp;2000&nbsp;&nbsp;
        <input type="textbox" name="text2" disabled><br>
</div>
</body>

Answer 4

您应该使用单选按钮上的类，以防您在页面中添加更多单选按钮...

<input type="radio" name="household" class="myradio" value="electronics">Electronics<br>
<input type="radio" name="household" class="myradio"  value="cookware">Cookware<br>
<input type="radio" name="household" class="myradio"   value="both">Both<br>

同样在复选框上......

<div id="electronics" style="display:none">
    <input type="checkbox" class="mycheckbox" value="radio" name="radio">Radio &nbsp;&nbsp;2000&nbsp;&nbsp;
    <input type="text" id="text_radio" name="text_radio"><br>
    <input type="checkbox" class="mycheckbox" value="phone" name="phone">Phone&nbsp;&nbsp;2000&nbsp;&nbsp;
    <input type="text" id="text_phone" name="text_phone"><br>
</div>

然后在页面加载后立即禁用复选框并创建单击功能：

$(document).ready(function(){
    // disable all text inputs
    $(".textbox").prop("disabled", true);

    $(".myradio").click(function(){
        //get value from this radio and show respective div
        $("#"+$(this).val()).show();
        //enable text input from #text_(value)
        $("#text_"+$(this).val()).prop("disabled", false);
    });

});

根据无线电和复选框显示和隐藏，启用和禁用

4 个答案: