0

モーダルウィンドウ内にリストされたチェックボックス内のjqueryで.nextAllオプションを使用しようとしています..ユーザーがリンクをクリックしてモーダルウィンドウが開いたとき、関数 .on("click") を介して、それはchexkboxが表示され、チェックボックスのチェックプロップを変更するクリック関数内にコードを書きました。

$('input[name="Company"],input[name="Country"]').live("click",function(){

if ($(this).is(':checked')){
    alert("s");
      $(this).nextAll('input[name="'+this.name+'Sub"]').prop('checked',true);
} else {
       alert("n");
      $(this).nextAll('input[name="'+this.name+'Sub"]').prop('checked',false);   
}
});

 <input type="checkbox" class="entityCheckboxHeader1" id="entityCheckboxHeader" name="Company">Company
 <input class="modalEntityCompany" id="entity1" type="checkbox" name="CompanySub">Microsoft
 <input class="modalEntityCompany" id="entity2" type="checkbox" name="CompanySub">Apple
<br /> 
<input type="checkbox" class="entityCheckboxHeader2" id="entityCheckboxHeader" name="Country">Country
 <input class="modalEntity" id="entity3" type="checkbox" name="CountrySub">USA
 <input class="modalEntity" id="entity4" type="checkbox" name="CountrySub">UK

このプログラムは、jsfiddle または作成した新しい html 内で試してみると、独立して正常に動作しますが、作成したクリック関数内で使用すると機能しません。紛争の原因は何ですか？

注：チェックボックスに.live（）関数を使用しているのは、.on（）を使用すると.nextAll部分にさえ入らないためです

動的作成部

function generateTreeHTML(input) {

var html = '';
var entityNumber = 1;
var color = 663399;
html = "<ul id='tree' class='treeview-black' >";
for ( var m = 0; m < input.length; m++) {


        html+="<li>";

    currentEntity = input[m];

    currentEntityType = currentEntity.entity;

    html += "<span style='font-size:12px;  font-family:Helvetica; font-weight:bold;' id='entityHeader' class='entityHeader"
            + getEntityHeader()
            + "'><input name='" + currentEntityType +"' type='checkbox' id='entityCheckboxHeader' class=\""
            + 'entityCheckboxHeader'
            + getEntityCheckboxHeader()
            + "\" />"
            + currentEntityType
            + "</span><div style='width:15px; height:10px; background-color:#"
            + colorArray[entityNumber]
            + "; float:right; margin-right:50px; margin-top:5px;'></div>";
            html+="<ul>";
    for ( var n = 0; n < currentEntity[currentEntityType].length; n++) {
        html += "<li>";
        var entityName = currentEntity[currentEntityType][n].entity;
        var entityName1 = entityName.split('.').join("");
        entityName1 = entityName1.split('_').join("");
        entityName1 = entityName1.replace(/ /g, "");
        html += "<span><input type='checkbox' key=\"" + entityName
                + "\" mapKey=\"" + currentEntityType
                + "\" categoryNumber=\"" + entityNumber
                + "\" class='modalEntity' id=\"" + 'entity' + getEntityID()
                + "\" name='" + currentEntityType +  "Sub'>" + entityName + "</span>";

        html += "</li>";

    }

    html+="</ul></li>";
    entityNumber = entityNumber + 1;
    html += "<div style='width:200px; border-bottom:1px solid #cccccc; height:1px;'></div>";
}
html += "</ul>";
return html;
    }
4

2 に答える 2

1

この.nextAll()メソッドは、次の兄弟要素のみを見つけます（ docoで非常に明確に述べられているように）。動的に作成している構造は、関連するチェックボックスをそれぞれ異なる li 要素内の独自のスパンに配置しているようです。つまり、それらは相互の兄弟でも、クリックハンドラーが属するヘッダーチェックボックスの兄弟でもありません。要素を見つけるために使用していたトラバーサル メソッドが、異なる html 構造で機能することを期待することはできません。私のオフィスから私の家への運転ルートがあなたの家に到達するのと同じように機能することはありません。

代わりにこれを試してください：

$('input[name="Company"],input[name="Country"]').live("click",function(){    
   if ($(this).is(':checked')){
      alert("s");
      $('input[name="'+this.name+'Sub"]').prop('checked',true);
   } else {
       alert("n");
      $('input[name="'+this.name+'Sub"]').prop('checked',false);   
   }
});

これは次のように大幅に単純化できます。

$('input[name="Company"],input[name="Country"]').live("click",function(){    
      $('input[name="'+this.name+'Sub"]').prop('checked',this.checked);    
});

または、文書内の別の場所に同じ名前のチェックボックスが他にあるかもしれないと懸念している場合は、クリックされたヘッダー ボックスが属する同じ li 要素内だけを調べることができます。

$(this).closest('li')
       .find('input[name="'+this.name+'Sub"]').prop('checked',this.checked);
于 2012-07-11T06:58:46.930 に答える
0

checkinputチェックボックスにクラスの発言権を与えるinput[name="Company"] and input[name="Country"]"

$('body').delegate(".checkinput","click",function(){

    if ($(this).is(':checked')){
        alert("s");
          $(this).nextAll('input[name="'+$(this).attr('name')+'Sub"]').prop('checked',true);
    } else {
           alert("n");
          $(this).nextAll('input[name="'+$(this).attr('name')+'Sub"]').prop('checked',false);   
    }
    });
于 2012-07-11T06:04:56.630 に答える