输入JavaScript代码不工作

-3

所以我想要的是当我点击豪华我想要所有的选项进行检查，所以雾灯皮革和DVD，但它不工作..我不知道我的jQuery有什么问题：/请帮忙还当我点击一个选项，让我们说，我想雾灯，机器会自动检查自定义一个输入JavaScript代码不工作

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <title>A basic form</title> 
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> 
 
    </script> 
 
    <style type="text/css"> 
 
     .form-field { 
 
      clear: both; 
 
      padding: 10px; 
 
      width: 350px; 
 
     } 
 
     .form-field label { 
 
      float: left; 
 
      width: 150px; 
 
      text-align: right; 
 
     } 
 
     .form-field input { 
 
      float: right; 
 
      width: 150px; 
 
      text-align: left; 
 
     } 
 
     #submit { 
 
      text-align: center; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <h1>a basic form</h1> 
 
    <hr> 
 
     <form action="#"> 
 
     <fieldset> 
 
      <legend> 
 
      Car trim and package information 
 
      </legend> 
 
      <div class="form-field"> 
 
      
 
      <div>Package:</div> 
 
       <input id="plain" type="radio" name="trim" value="plain"> 
 
       <label for="plain">Plain</label> 
 
      <input id="deluxe" type="radio" name="trim" value="custom"> 
 
       <label for="deluxe">Deluxe</label> 
 
       <input id="custom" type="radio" name="trim" value="custom"> 
 
                   <label for="custom">Custom</label> 
 
       
 
       
 
       
 
       
 
      </div> 
 
      <div class="form-field"> 
 
      <div>Extra Options:</div> 
 
       <div> 
 
       <input type="checkbox" id="foglights" name="option"> 
 
       <label for="foglights">Fog Lights</label> 
 
       </div> 
 
       <div> 
 
       <input type="checkbox" id="leather" name="option" value="leather"> 
 
       <label for="leather">Leather</label> 
 
       </div> 
 
       <input type="checkbox" id="dvd" name="option" value="dvd"> 
 
       <label for="dvd">DVD</label> 
 
      </div> 
 
      <div class="form-field"> 
 
       <input id="submit" type="submit" name="submit" value="Send Form"> 
 
      </div> 
 
      
 
      
 
      
 
      
 
      
 
     
 
      
 
      
 
      
 
      </fieldset> 
 
     
 
     
 
     </form> 
 
    <script type="text/javascript"> 
 

 
     $(documet).ready(function() { 
 
      $("input[name="trim"]").click(function(event) { 
 
       if ($(this).val() == "deluxe") { 
 
        $("input[name="option"]").attr("xxxxxxxxxxChecked", true); 
 
       }else if ($(this).val() == "plain") { 
 
        $("input[name="option"]").attr("Checked", false); 
 
       } 
 
      }); 
 
      $("input[name="option"]").click(function(event) { 
 
       $("#custom").attr("Checked", "Checked") 
 
      } 
 
     }); 
 
     
 
     
 
     
 
     
 
     </script> 
 
    </body>

来源

2016-09-28 Vercity Official

第一次使用'document'，而不是'documet' –

_“我不知道什么是错我的jQuery” _ - 检查你的浏览器控制台，按F12。您还需要编写像这样的属性选择器：'$（“input [name ='option']”）''。 – Xufox

您正在关闭时，你问jQuery来获取字符串DOM元素。

这是你的问题：

$("input[name="trim"]")

这应该是：

$('input[name="trim"]')

见我切换周围"（双引号）为'（单引号）？您在代码中多次执行此操作，因此您必须在多个位置查找并修复它。

来源

2016-09-28 20:41:28 Svenskunganka

有多个拼写错误和错误。 –

我固定每一个，它仍然无法正常工作。 –

试试这个：

<!doctype html> 
<html> 

<head> 
    <title>A basic form</title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> 
    </script> 
    <style type="text/css"> 
     .form-field { 
      clear: both; 
      padding: 10px; 
      width: 350px; 
     } 
     .form-field label { 
      float: left; 
      width: 150px; 
      text-align: right; 
     } 
     .form-field input { 
      float: right; 
      width: 150px; 
      text-align: left; 
     } 
     #submit { 
      text-align: center; 
     } 
    </style> 
</head> 
<body> 
<h1>a basic form</h1> 
<hr> 
<form action="#"> 
    <fieldset> 
     <legend> 
      Car trim and package information 
     </legend> 
     <div class="form-field"> 

      <div>Package:</div> 
      <input id="plain" type="radio" name="trim" value="plain"> 
      <label for="plain">Plain</label> 
      <input id="deluxe" type="radio" name="trim" value="deluxe"> 
      <label for="deluxe">Deluxe</label> 
      <input id="custom" type="radio" name="trim" value="custom"> 
      <label for="custom">Custom</label> 




     </div> 
     <div class="form-field"> 
      <div>Extra Options:</div> 
      <input type="checkbox" id="foglights" name="option"> 
      <label for="foglights">Fog Lights</label> 
      <div> 
       <input type="checkbox" id="leather" name="option" value="leather"> 
       <label for="leather">Leather</label> 
      </div> 
      <input type="checkbox" id="dvd" name="option" value="dvd"> 
      <label for="dvd">DVD</label> 
     </div> 
     <div class="form-field"> 
      <input id="submit" type="submit" name="submit" value="Send Form"> 
     </div> 









    </fieldset> 


</form> 
<script type="text/javascript"> 

    $(document).ready(function() { 
     $("input[name='trim']").click(function(event) { 
      if ($(this).val() == "deluxe") { 
       $("input[name='option']").attr('checked', true); 
      }else if ($(this).val() == "plain") { 
       $("input[name='option']").attr("checked", false); 
      } 
     }); 
     $("input[name='option']").click(function(event) { 
      $("#custom").attr("Checked", "Checked") 
     }); 
    }); 




</script> 
</body> 

</html>

我希望这有助于你

来源

2016-09-28 20:50:24

不能：/ IT没有工作 –

你好，我编辑了我的答案，用它替换你所有的代码 –

有很多错误的代码，就像在jQuery函数clousures和选择。试试这个：

$(document).ready(function() { 
 
    $("input[name='trim']").click(function(event) { 
 
     if ($(this).val() == "deluxe") { 
 
      $("input[name='option']").attr('checked', true); 
 
     }else if ($(this).val() == "plain") { 
 
      $("input[name='option']").attr("checked", false); 
 
     } 
 
    }); 
 
    $("input[name='option']").click(function(event) { 
 
     $("#custom").attr("Checked", "Checked") 
 
    }); 
 
});

  .form-field { 
 
       clear: both; 
 
       padding: 10px; 
 
       width: 350px; 
 
      } 
 
      .form-field label { 
 
       float: left; 
 
       width: 150px; 
 
       text-align: right; 
 
      } 
 
      .form-field input { 
 
       float: right; 
 
       width: 150px; 
 
       text-align: left; 
 
      } 
 
      #submit { 
 
       text-align: center; 
 
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<h1>a basic form</h1> 
 
<hr> 
 
<form action="#"> 
 
    <fieldset> 
 
     <legend> 
 
      Car trim and package information 
 
     </legend> 
 
     <div class="form-field"> 
 

 
      <div>Package:</div> 
 
      <input id="plain" type="radio" name="trim" value="plain"> 
 
      <label for="plain">Plain</label> 
 
      <input id="deluxe" type="radio" name="trim" value="custom"> 
 
      <label for="deluxe">Deluxe</label> 
 
      <input id="custom" type="radio" name="trim" value="custom"> 
 
      <label for="custom">Custom</label> 
 

 
     </div> 
 
     <div class="form-field"> 
 
      <div>Extra Options:</div> 
 
      <input type="checkbox" id="foglights" name="option"> 
 
      <label for="foglights">Fog Lights</label> 
 
      <div> 
 
       <input type="checkbox" id="leather" name="option" value="leather"> 
 
       <label for="leather">Leather</label> 
 
      </div> 
 
      <input type="checkbox" id="dvd" name="option" value="dvd"> 
 
      <label for="dvd">DVD</label> 
 
     </div> 
 
     <div class="form-field"> 
 
      <input id="submit" type="submit" name="submit" value="Send Form"> 
 
     </div> 
 

 
    </fieldset> 
 
</form>

来源

2016-09-28 20:54:13

第一个错误：

$("input[name="trim"]")

当您使用相同的符号（即：“）在字符串中必须转义，或者你可以使用另一个符号：

$("input[name=\"trim\"]")

或

$('input[name="trim"]')

的错误是： “输入[名称=” 修剪 “]” - >第一串：输入[名称=加符号装饰以及字符串]：没有意义.....

的第二个错误：你要测试的标签文本，而不是单选按钮值：所以你需要：

$('label[for="' + this.id + '"]').text().toLowerCase()

由于测试是大小写敏感的，你需要为小写整个字符串。

第三个错误是：

attr("Checked", false);

被“选中”（小写），这些财产必须使用该属性：

prop("checked", false);

事件无线电或复选框变化，而不是单击。

所以最后的结果是：

$(document).ready(function() { 
 
    $("input[name=\"trim\"]").change(function(event) { 
 
    var lblTxt = $('label[for="' + this.id + '"]').text().toLowerCase(); 
 
    if (lblTxt == "deluxe") { 
 
     $("input[name=\"option\"]").prop("checked", true); 
 
    }else if (lblTxt == "plain") { 
 
     $("input[name=\"option\"]").prop("checked", false); 
 
    } 
 
    }); 
 
    $("input[name=\"option\"]").change(function(event) { 
 
    $("#custom").prop("checked", this.checked) 
 
    }); 
 
});

.form-field { 
 
    clear: both; 
 
    padding: 10px; 
 
    width: 350px; 
 
} 
 
.form-field label { 
 
    float: left; 
 
    width: 150px; 
 
    text-align: right; 
 
} 
 
.form-field input { 
 
    float: right; 
 
    width: 150px; 
 
    text-align: left; 
 
} 
 
#submit { 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<h1>a basic form</h1> 
 
<hr> 
 
<form action="#"> 
 
    <fieldset> 
 
     <legend> 
 
      Car trim and package information 
 
     </legend> 
 
     <div class="form-field"> 
 

 
      <div>Package:</div> 
 
      <input id="plain" type="radio" name="trim" value="plain"> 
 
      <label for="plain">Plain</label> 
 
      <input id="deluxe" type="radio" name="trim" value="custom"> 
 
      <label for="deluxe">Deluxe</label> 
 
      <input id="custom" type="radio" name="trim" value="custom"> 
 
      <label for="custom">Custom</label> 
 
     </div> 
 
     <div class="form-field"> 
 
      <div>Extra Options:</div> 
 
      <input type="checkbox" id="foglights" name="option"> 
 
      <label for="foglights">Fog Lights</label> 
 
      <div> 
 
       <input type="checkbox" id="leather" name="option" value="leather"> 
 
       <label for="leather">Leather</label> 
 
      </div> 
 
      <input type="checkbox" id="dvd" name="option" value="dvd"> 
 
      <label for="dvd">DVD</label> 
 
     </div> 
 
     <div class="form-field"> 
 
      <input id="submit" type="submit" name="submit" value="Send Form"> 
 
     </div> 
 
    </fieldset> 
 
</form>

来源

2016-09-28 20:58:11 gaetanoM

哇..这不是我正在阅读的书显示... –

输入JavaScript代码不工作

回答

相关问题