爲什麼只有一個複選框實例工作如果有多個

Question

我有一個應用程序，它的多個實例存在於同一個頁面中。我在應用程序中使用input來顯示相應數據的一種幻燈片放映。然而，label和input僅適用於頁面中的一個實例。所以如果在頁面中有相同應用程序的實例，則只有第一個可以工作。

這裏是一個演示：JSFiddle

$.fn.MP = function(options) { 
 
    var settings = $.extend({ 
 
    // These are the defaults 
 
    text: "" 
 
    }, options); 
 

 
    $(this).on("click tap", "input", function() { 
 
    $(this).parent().siblings().find("input").prop("checked", false); 
 
    }); 
 
}; 
 

 
$("#item1").MP({}); 
 
$("#item2").MP({});

input[type="checkbox"] { 
 
    position: absolute; 
 
    opacity: 0; 
 
} 
 

 
.panelTop > div div { 
 
    display: none; 
 
} 
 

 
.panelTop > div input[type="checkbox"]:checked ~ div { 
 
    display: block; 
 
} 
 

 
.panel { 
 
    width: 400px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
} 
 

 
.panel > .panelTop { 
 
    width: 100%; 
 
    height: 49px; 
 
    border-bottom: 1px dashed black; 
 
} 
 

 
.panel > .panelBottom { 
 
    width: 100%; 
 
    height: 50px; 
 
} 
 

 
.panel > .panelTop > div div { 
 
    width: 24px; 
 
    height: 24px; 
 
    float: right; 
 
    margin: 0px 9px 0 0; 
 
    border: 1px dashed black; 
 
} 
 

 
.panel > .panelBottom > div { 
 
    width: 32px; 
 
    height: 32px; 
 
    float: right; 
 
    margin: 9px 9px 0 0; 
 
    border: 1px solid black; 
 
    text-align: center; 
 
    font-size: 22px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="panel" id="item1"> 
 
    <div class="panelTop"> 
 
    Dependant Buttons: 
 
    <div> 
 
     <input id="box-1" type="checkbox" checked> 
 
     <div>1.1</div> 
 
     <div>1.2</div> 
 
     <div>1.3</div> 
 
    </div> 
 
    <div> 
 
     <input id="box-2" type="checkbox"> 
 
     <div>2.1</div> 
 
     <div>2.2</div> 
 
     <div>2.3</div> 
 
    </div> 
 
    <div> 
 
     <input id="box-3" type="checkbox"> 
 
     <div>3.1</div> 
 
     <div>3.2</div> 
 
     <div>3.3</div> 
 
    </div> 
 
    </div> 
 
    <div class="panelBottom"> 
 
    Main Buttons: 
 
    <label for="box-1" class="btn1">1</label> 
 
    <label for="box-2" class="btn2">2</label> 
 
    <label for="box-3" class="btn3">3</label> 
 
    </div> 
 
</div> 
 
<div class="panel" id="item2"> 
 
    <div class="panelTop"> 
 
    Dependant Buttons: 
 
    <div> 
 
     <input id="box-1" type="checkbox"> 
 
     <div>1.1</div> 
 
     <div>1.2</div> 
 
     <div>1.3</div> 
 
    </div> 
 
    <div> 
 
     <input id="box-2" type="checkbox"> 
 
     <div>2.1</div> 
 
     <div>2.2</div> 
 
     <div>2.3</div> 
 
    </div> 
 
    <div> 
 
     <input id="box-3" type="checkbox"> 
 
     <div>3.1</div> 
 
     <div>3.2</div> 
 
     <div>3.3</div> 
 
    </div> 
 
    </div> 
 
    <div class="panelBottom"> 
 
    Main Buttons: 
 
    <label for="box-1" class="btn1">1</label> 
 
    <label for="box-2" class="btn2">2</label> 
 
    <label for="box-3" class="btn3">3</label> 
 
    </div> 
 
</div>

所以你可以在演示中看到，有應用程序的兩個實例，點擊1, 2 or 3的按鈕，使得變化的即使您點擊第二個實例也是第一個實例。

我想使每個實例正常工作，並且每個單選按鈕只有在按下時才起作用。

有什麼想法？

Answer 1

正如@ dryden-long已經提到的，ID必須是唯一的。修復此問題，並相應地修改相應的for屬性，並解決您的問題。

編輯：按照您的評論，因爲你的元素的id值已經獨一無二的，你可以不喜歡下面，爲您的input元素動態生成唯一id值，並更新相應label的for值因此元素：

$.fn.MP = function(options) { 
 
    var settings = $.extend({ 
 
    // These are the defaults 
 
    text: "" 
 
    }, options); 
 

 
    $(this).on("click tap", "input", function() { 
 
    $(this).parent().siblings().find("input").prop("checked", false); 
 
    }); 
 
}; 
 

 
// dynamically-generate id/for values 
 
$('div.panel').each(function(index, el) { 
 
    var $panel = $(el); 
 
    var panelId = $panel.attr('id'); 
 
    var $panelBottom = $('div.panelBottom', $panel); 
 

 
    $('div.panelTop > div > input', $panel).each(function(indexInput, elInput) { 
 
     var $input = $(elInput); 
 
     var inputId = panelId + '-box-' + indexInput; 
 

 
     $input.attr('id', inputId); 
 
     $('label:nth(' + indexInput + ')', $panelBottom).attr('for', inputId); 
 
    }); 
 
}); 
 

 
$("#item1").MP({}); 
 
$("#item2").MP({});

input[type="checkbox"] { 
 
    position: absolute; 
 
    opacity: 0; 
 
} 
 

 
.panelTop > div div { 
 
    display: none; 
 
} 
 

 
.panelTop > div input[type="checkbox"]:checked ~ div { 
 
    display: block; 
 
} 
 

 
.panel { 
 
    width: 400px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
} 
 

 
.panel > .panelTop { 
 
    width: 100%; 
 
    height: 49px; 
 
    border-bottom: 1px dashed black; 
 
} 
 

 
.panel > .panelBottom { 
 
    width: 100%; 
 
    height: 50px; 
 
} 
 

 
.panel > .panelTop > div div { 
 
    width: 24px; 
 
    height: 24px; 
 
    float: right; 
 
    margin: 0px 9px 0 0; 
 
    border: 1px dashed black; 
 
} 
 

 
.panel > .panelBottom > div { 
 
    width: 32px; 
 
    height: 32px; 
 
    float: right; 
 
    margin: 9px 9px 0 0; 
 
    border: 1px solid black; 
 
    text-align: center; 
 
    font-size: 22px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="panel" id="item1"> 
 
    <div class="panelTop"> 
 
    Dependant Buttons: 
 
    <div> 
 
     <input type="checkbox"> 
 
     <div>1.1</div> 
 
     <div>1.2</div> 
 
     <div>1.3</div> 
 
    </div> 
 
    <div> 
 
     <input type="checkbox"> 
 
     <div>2.1</div> 
 
     <div>2.2</div> 
 
     <div>2.3</div> 
 
    </div> 
 
    <div> 
 
     <input type="checkbox"> 
 
     <div>3.1</div> 
 
     <div>3.2</div> 
 
     <div>3.3</div> 
 
    </div> 
 
    </div> 
 
    <div class="panelBottom"> 
 
    Main Buttons: 
 
    <label class="btn1">1</label> 
 
    <label class="btn2">2</label> 
 
    <label class="btn3">3</label> 
 
    </div> 
 
</div> 
 
<div class="panel" id="item2"> 
 
    <div class="panelTop"> 
 
    Dependant Buttons: 
 
    <div> 
 
     <input type="checkbox"> 
 
     <div>1.1</div> 
 
     <div>1.2</div> 
 
     <div>1.3</div> 
 
    </div> 
 
    <div> 
 
     <input type="checkbox"> 
 
     <div>2.1</div> 
 
     <div>2.2</div> 
 
     <div>2.3</div> 
 
    </div> 
 
    <div> 
 
     <input type="checkbox"> 
 
     <div>3.1</div> 
 
     <div>3.2</div> 
 
     <div>3.3</div> 
 
    </div> 
 
    </div> 
 
    <div class="panelBottom"> 
 
    Main Buttons: 
 
    <label class="btn1">1</label> 
 
    <label class="btn2">2</label> 
 
    <label class="btn3">3</label> 
 
    </div> 
 
</div>