如何在选中输入单选后滚动到 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 事件。

来源：https://github.com/fronteed/icheck#callbacks, jQuery Scroll to Div, 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

您可以使用 .animate( properties [, duration ] [, easing ] [, complete ] ) on change 的单选按钮值来获得所需的结果。

演示

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>

如何在选中输入单选后滚动到 div

how to scroll to a div after checked input radio

javascript

jquery

html

icheck