2013-06-19 33 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

相关问题