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

你可以听＃34; isChecked＆＃34; icheck库的事件，并使用复选框名称的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 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 ] )的单选按钮值上使用change来获取所需的结果。

<强>样本

＆＃13;

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);
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何在检查输入无线电后滚动到div

4 个答案: