0

我想对所有五个复选框使用我自己的事件处理程序。我在代码中创建了一个复选框，然后将其克隆了四次。

我对这段代码的问题：我可以选中和取消选中第一个复选框（代码中的复选框）。但是第一个复选框不使用我的事件处理程序，而是使用它自己的（我在 "$('input:checkbox').live('click', function (event) {..." 代码中设置了一个断点，它是如果我单击第一个复选框，则永远不会到达。其他四个框到达我的事件处理程序，但如果我只单击一个，则所有四个框都会被选中。如果第一个框（代码中的那个）被选中，我只能选中四个框如果第一个框未选中，我只能取消选中它们。似乎有很多我不明白的副作用。这是完整的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
</head>
<body onfocus="readvalues()">
<div id="mypage" data-role="page" data-theme="a">
<script>
$(document).ready(function () {
   $('input:checkbox').live('click', function (event) {       
    event.preventDefault();
    event.stopPropagation();
    if ($(this).prop('checked')) {
         $(this).prop('checked', false);
         //$(this).removeAttr('checked');
         $(this).checkboxradio("refresh");
         //$(this).attr("checked",false).checkboxradio("refresh");
     } else {
         $(this).prop('checked', true);    
         //$(this).attr('checked', true);
         $(this).checkboxradio("refresh");
     }
     //$(this).prop('checked', true);    
     //$(this).attr('checked', true).checkboxradio('refresh');
     $(this).checkboxradio("refresh");
     //$(selector).trigger('create');    
   });
});    
</script>

  <div data-role="fieldcontain" id="fieldcontainid">
    <fieldset data-role="controlgroup" id="fieldsetid">
       <div id="sample">
       <input id="checkboxsample" class="custom" type="checkbox" data-iconpos="left" name="checkboxsample">
       <label id="labelsample" for="checkboxsample">Test</label>
       </div>
       <div id="existing"></div>
    </fieldset>
  </div>
<script>
readvalues = function()
{

    var existing = document.getElementById('existing');
    existing.textContent = '';

    for (i=0; i<=3; i++)  
    {  
        var clonecheckbox = $("#sample").clone(false);
        $("#existing").append(clonecheckbox);
        clonecheckbox.attr("id",i.toString());
        $("#"+i.toString()).children().children().eq(0).attr("id","cb"+i.toString());
        $("#"+i.toString()).children().children().eq(0).attr("name","cb"+i.toString());

        $("#"+i.toString()).children().children().eq(1).attr("id","label"+i.toString());
        $("#"+i.toString()).children().children().eq(1).attr("for","cb"+i.toString());
    }
}
</script>
</div>
</body>
</html>

为了使用我自己的事件处理程序四个所有五个复选框，我需要在我的代码中做哪些更改？我检查/取消选中复选框的事件处理是否正确？

4

2 回答 2

0

live不推荐使用方法和:checkbox选择器，请尝试使用该on方法，还请注意，当您克隆输入时，您应该IDs在附加它们之前更改它们，具有多个元素的 ID 会使您的标记无效，一种解决方案是使用类而不是 ID。

$(document).on('change', 'input[type="checkbox"]', function(){
  // ...
})
于 2012-08-14T20:49:32.373 回答
0

将代码移动到函数并将其绑定到原始代码：

$(document).ready(function () {
   $('input:checkbox').on('click', doTheWork);
}); 

function doTheWork(event)   {
        event.preventDefault();
        event.stopPropagation();
        if ($(this).prop('checked')) {
             $(this).prop('checked', false);
             //$(this).removeAttr('checked');
             $(this).checkboxradio("refresh");
             //$(this).attr("checked",false).checkboxradio("refresh");
         } else {
             $(this).prop('checked', true);    
             //$(this).attr('checked', true);
             $(this).checkboxradio("refresh");
         }
         //$(this).prop('checked', true);    
         //$(this).attr('checked', true).checkboxradio('refresh');
         $(this).checkboxradio("refresh");
         //$(selector).trigger('create');    
       }

然后，当您创建复选框时，只需执行以下操作：

clonecheckbox.click(doTheWork);
于 2012-08-14T20:51:19.327 回答