चेक किए गए jQuery पर चेकबॉक्स को ले जाएं




html checkbox (3)

अगर चेक की जाती है तो मैं चेकबॉक्सेस को स्थानांतरित करना चाहता हूं।

<div id="chkboxes">
<input type="checkbox" name="city" id="1"/> One <br />
<input type="checkbox" name="city" id="2"/> Two <br />
<input type="checkbox" name="city" id="3"/> Three   <br />
<input type="checkbox" name="city" id="4"/> Four    <br />
<input type="checkbox" name="city" id="5"/> Five    <br />
</div>

इसलिए यदि कोई चेकबॉक्स चेक होता है, तो उसे सूची के शीर्ष पर जाना चाहिए। मैं jquery के साथ ऐसा कैसे करूँ?

मैं छद्म कोड बनाने की कोशिश कर रहा हूं, लेकिन तर्क प्राप्त करने में सक्षम नहीं हूं।

धन्यवाद।


onChange हैंडलर का प्रयोग करें और अगर चेकबॉक्स की जांच की जाती है तो चेकबॉक्स क्लोन करें और इसे remove । अब क्लोन तत्व को .prepend() का उपयोग करके चेकबॉक्स की सूची में शामिल करें।

$(function(){
  var checkedbox;
  $('input[type="checkbox"]').on('change', function(){
    if($(this).prop('checked', 'checked')){
      checkedbox = $(this).parent().clone();
    }
    $(this).parent().remove();
    $('#chkboxes').prepend(checkedbox);
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chkboxes">
<div><input type="checkbox" name="city" id="1"/> One <br /></div>
<div><input type="checkbox" name="city" id="2"/> Two <br /></div>
<div><input type="checkbox" name="city" id="3"/> Three   <br /></div>
<div><input type="checkbox" name="city" id="4"/> Four    <br /></div>
<div><input type="checkbox" name="city" id="5"/> Five    <br /></div>
</div>


  var list = $("ul"),
        origOrder = list.children();
    
    list.on("click", ":checkbox", function() {
        var i, checked = document.createDocumentFragment(),
            unchecked = document.createDocumentFragment();
        for (i = 0; i < origOrder.length; i++) {
            if (origOrder[i].getElementsByTagName("input")[0].checked) {
                checked.appendChild(origOrder[i]);
            } else {
                unchecked.appendChild(origOrder[i]);
            }
        }
        list.append(checked).append(unchecked);
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<ul>
<li><label><input type="checkbox" id="one" />One</label></li>
<li><label><input type="checkbox" id="two" />Two</label></li>
<li><label><input type="checkbox" id="three" />Three</label></li>
<li><label><input type="checkbox" id="four" />Four</label></li>
<li><label><input type="checkbox" id="five" />Five</label></li>
</ul>

jquery और jsfiddle काम के साथ इस कोशिश यहाँ क्लिक करें


आप इस तरह जावास्क्रिप्ट समारोह का उपयोग कर सकते हैं

$('table').on('change', '[type=checkbox]', function () {
 var $this = $(this);
 var row = $this.closest('tr');
 if ( $this.prop('checked') ){ // move to top
    row.insertBefore( row.parent().find('tr:first-child') )
        .find('label').html('move to bottom'); 
 }
 else { // move to bottom
    row.insertAfter( row.parent().find('tr:last-child') )
        .find('label').html('move to top');  
 }
});

डेमो





checkbox