檢查輸入廣播后如何滾動到div

Question

我使用icheck jquery插件為輸入廣播設置樣式

我需要在檢查單選滾動到特殊div ID時

<input type="radio" class="checkb" name="selectplan" value="P6302" id="P6302">

和腳本

<script>

    $(document).ready(function () {
        $('input').iCheck({
            checkboxClass: 'icheckbox_square-red',
            radioClass: 'iradio_square-red',
            increaseArea: '20%' // optional
        });
    });
</script>

Answer 1

因為它是一個單選按鈕。 您可以做的是為其創建一個onclick函數。 如您所知，當有人單擊它時，需要向下滾動到某個部分。 所以我不知道你為什么需要這個插件。 將其包裝在div中。

$(".radio-button").click(function() {
        $('html, body').animate({

            scrollTop: $(".toyourdiv").offset().top-headerHeight
        }, 700);
});

Answer 2

您可以偵聽icheck庫的“ isChecked”事件，然后滾動到帶有復選框名稱ID的div：

$('input').on('ifChecked', function(event) {

   // Fixed scroll target       
   const target = $('#target');

   // For dynamic targets: adjust the target selector like
   // const target = $($(event.target)).attr('name');

   $('html,body').animate({
      scrollTop: target.offset().top
   }, 1000);
});

如果希望每次單擊復選框時都進行滾動，請改用ifToggled事件。

Soures： https://github.com/fronteed/icheck#callbacks ， jQuery的滾動到事業部 ， https://api.jquery.com/event.target/ ， http://api.jquery.com/attr/

Answer 3

$('input').on('ifChanged', function(event){
     $('html, body').animate({
        scrollTop: $("#myDiv").offset().top
    }, 2000);
});

使用此代碼

Answer 4

您可以在change單選按鈕值時使用.animate( properties [, duration ] [, easing ] [, complete ] ) ，以獲取所需的結果。

演示

 var str = `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`; let html = $.map(document.querySelectorAll('input'), el => { return `<div id=${$(el).val()} class="mydiv"><b>${$(el).val()}</b>${str}</div>`; }); $('#container').html(html.join('</br>')); $("input[type=radio]").on('change',function(e) { $('html, body').animate({ scrollTop: $(`#${$(e.target).val()}`).offset().top }, 1000); }); 

 .mydiv { padding: 5px; border: 1px solid #ccc; } .mydiv b { background: #3c3c3c; display: block; padding: 10px; color: #fff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" class="checkb" name="selectplan" value="P6302"><label>P6302</label> <input type="radio" class="checkb" name="selectplan" value="P6303"><label>P6303</label> <input type="radio" class="checkb" name="selectplan" value="P6304"><label>P6304</label> <input type="radio" class="checkb" name="selectplan" value="P6305"><label>P6305</label> <input type="radio" class="checkb" name="selectplan" value="P6306"><label>P6306</label> <input type="radio" class="checkb" name="selectplan" value="P6307"><label>P6307</label> <div id='container'></div>