複数のチェックボックスを任意の順番に並び替えしたのち、チェックがついているものの値を一括取得したいのですが、チェックがついた状態のものの順番を変更すると一括取得した値が重複してしまいます。
対処方法わかる方おりませんでしょうか。
《追記》
チェックボックスのチェックがない状態で順序を変更後、チェックボックスにチェックを入れる場合は問題ないようです。
チェックボックスにチェックが入ったものを順序変更した場合のみ、チェックが入った値が1つ増えます(重複)します。その後はいくら順序を変更しても重複した値を増えません。
javascript
1 $(function(){ 2 //表示順序を下に変更 3 $("#custom-display-post-widget #item li").on("click", ".down", function() { 4 var now_index = $(this).closest("li").index() + 1; 5 var next_index = $(this).closest("li").next().index() + 1; 6 var now_obj = $(this).closest("li").html(); 7 var next_obj = $(this).closest("li").next().html(); 8 $("#custom-display-post-widget #display-setting #item ul li:nth-child("+next_index+")").html(now_obj); 9 $("#custom-display-post-widget #display-setting #item ul li:nth-child("+now_index+")").html(next_obj); 10 $("#custom-display-post-widget #item li input").removeAttr('checked');//追記 11 checkVal(); 12 }); 13 14 //表示順序を上に変更 15 $("#custom-display-post-widget #item li").on("click", ".up", function() { 16 var now_index = $(this).closest("li").index() + 1; 17 var prev_index = $(this).closest("li").prev().index() + 1; 18 var now_obj = $(this).closest("li").html(); 19 var prev_obj = $(this).closest("li").prev().html(); 20 $("#custom-display-post-widget #display-setting #item ul li:nth-child("+prev_index+")").html(now_obj); 21 $("#custom-display-post-widget #display-setting #item ul li:nth-child("+now_index+")").html(prev_obj); 22 $("#custom-display-post-widget #item li input").removeAttr('checked');//追記 23 checkVal(); 24 }); 25 26 // 27 28 //表示設定を取得 29 $("#custom-display-post-widget #item li input").live("change", function() { 30 31 //チェックされていた場合 32 if($(this).prop('checked')){ 33 $(this).attr('checked','checked'); 34 } 35 36 //チェックされていない場合 37 if(!$(this).prop('checked')){ 38 $(this).removeAttr('checked'); 39 } 40 41 checkVal(); 42 }); 43 44 function checkVal(){ 45 var checkBox=[]; 46 // チェックされた値を取得 47 $("#custom-display-post-widget #item li input:checked").each(function(){ 48 checkBox.push($(this).val()); 49 }); 50 //取得した値を input text にセット 51 $("#custom-display-post-widget input.display-post-set").val(checkBox); 52 } 53 });
HTML
1 <div id="display-setting"> 2 <p> 3 <input id="id_display_order" class="display-post-set" name="display_order" type="text" value="" size="30"> 4 </p> 5 <div id="item"> 6 <span class="title">アイテム:</span> 7 <ul> 8 <li><input class="date display-item" type="checkbox" name="date" value="date">date<span class="order"><span class="up">▲</span><span class="down">▼</span></span></li> 9 <li><input class="thumbnail display-item" type="checkbox" name="thumbnail" value="thumbnail">thumbnail<span class="order"><span class="up">▲</span><span class="down">▼</span></span></li> 10 <li><input class="title display-item" type="checkbox" name="title" value="title">title<span class="order"><span class="up">▲</span><span class="down">▼</span></span></li> 11 <li><input class="excerpt display-item" type="checkbox" name="excerpt" value="excerpt">excerpt<span class="order"><span class="up">▲</span><span class="down">▼</span></span></li> 12 <li><input class="category display-item" type="checkbox" name="category" value="category">category<span class="order"><span class="up">▲</span><span class="down">▼</span></span></li> 13 <li><input class="link display-item" type="checkbox" name="link" value="link">link<span class="order"><span class="up">▲</span><span class="down">▼</span></span></li> 14 </ul> 15 </div> 16 </div>
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/10/18 00:49
2016/10/18 02:28