1. 首頁
  2. 問答
  3. 輸入JavaScript代碼不工作

輸入JavaScript代碼不工作

2016-09-28 71 views
-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

+0

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

+1

_「我不知道什麼是錯我的jQuery」 _ - 檢查你的瀏覽器控制檯，按F12。您還需要編寫像這樣的屬性選擇器：'$（「input [name ='option']」）''。 – Xufox

回答

0

您正在關閉時，你問jQuery來獲取字符串DOM元素。

這是你的問題：

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

這應該是：

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

見我切換周圍"（雙引號）爲'（單引號）？您在代碼中多次執行此操作，因此您必須在多個位置查找並修復它。

來源

2016-09-28 20:41:28 Svenskunganka

+1

有多個拼寫錯誤和錯誤。 –

+0

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

0

試試這個：

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

+0

不能：/ IT沒有工作 –

+0

你好，我編輯了我的答案，用它替換你所有的代碼 –

0

有很多錯誤的代碼，就像在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

0

第一個錯誤：

$("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

+0

哇..這不是我正在閱讀的書顯示... –

相關問題

 相關問題