2013-06-19 31 views
0

第一次,在頁面加載時,我點擊豪華,點擊事件成功。 但是,當我點擊另一個選項並再次點擊豪華選項後,點擊事件不成功。如何在jQuery中繼續執行點擊事件?

我該如何讓它起作用?

這裏是我的代碼:

<!doctype html> 
<html> 
<head> 
    <title>A Basic Form</title> 
    <script type="text/javascript" src="scripts/jquery-1.10.1.min.js"> 
    </script> 
</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" value="foglights"> 
      <label for="foglights"> 
       Fog Lights</label> 
      <input type="checkbox" id="leather" name="option" value="leather"> 
      <label for="leather"> 
       Leather</label> 
      <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> 
+0

_how調用單擊事件工作continue_無法幫你嗎? –

回答

2

使用.prop(),而不是.attr()

背後爲什麼attr()不能正常工作的原因,

屬性和特性之間的差異可以在特定情況下非常重要。在jQuery 1.6之前,.attr()方法有時在檢索某些屬性時會考慮屬性值,這可能會導致行爲不一致。

所以,作爲jQuery的1.6,所述.prop()方法提供了一種方式,以明確地檢索屬性值,而.attr()檢索屬性。

和您的最終代碼會,

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

嘗試使用.prop()

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

演示:Fiddle

see this

相關問題