0

5 つのチェックボックスすべてに独自のイベント ハンドラーを使用したいと考えています。コードで 1 つのチェックボックスを作成し、それを 4 回複製します。

このコードに関する私の問題: 最初のチェックボックス (コード内のチェックボックス) をオンまたはオフにすることができます。しかし、最初のチェックボックスはイベントハンドラーを使用せず、それ自体を使用します (「$('input:checkbox').live('click', function (event) {...」コードにブレークポイントを設定すると、他の 4 つのボックスはイベント ハンドラーに到達しますが、1 つだけをクリックすると 4 つすべてがチェックされます。また、最初のボックス (コード内のボックス) がチェックされている場合にのみ、4 つのボックスをチェックできます。最初のボックスがチェックされていない場合にのみチェックを外すことができます. 理解できない副作用がたくさんあるようです. これは完全なコードです:

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

5 つのチェックボックスすべてで 4 つの独自のイベント ハンドラーを使用するには、コードをどのように変更する必要がありますか? チェックボックスをオン/オフにするイベント処理は正しいですか?

4

2 に答える 2

0

liveメソッドと:checkboxセレクターは非推奨です。onメソッドを使用してみてください。また、入力を複製するときは、それらIDsを追加する前に変更する必要があることに注意してください。いくつかの要素の ID を使用すると、マークアップが無効になります。1 つの解決策は、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 に答える