入力JavaScriptのコードが動作しない

-3

デラックスをクリックしたときに欲しいのは、すべてのオプションをチェックして、フォグライトとレザーが必要なのですが、動作しません。私のjqueryに何が間違っているかわかりません：/のiはフォグランプは、それがautomaticaly 1入力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>

私はこれがあなたの役に立てば幸い

jQueryの機能でclousuresとセレクタのようなコードには多くの誤りがあります

出典

2016-09-28 20:50:24

いいえ：/ ITは機能しませんでした –

こんにちは、私の答えを編集しました、あなたのコードをすべてそれに置き換えてください –

。（例：「）あなたは同じ記号を使用する場合

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

：あなたはそれをエスケープする必要がありますか、別のシンボルを使用することができ、文字列に

$(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"]')

エラーがある： "入力[名前=" トリム "]" - >最初の文字列：入力[名前=プラス記号トリムプラス文字列]：意味無し.....

2番目のエラー：あなたはラベルのテキストではなく、ラジオボタンの値をテストしたい：そうあなたが必要：テストは大文字と小文字が区別され

$('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のコードが動作しない

答えて

関連する問題