Question

查看以下更新

首先，感谢您的帮助！我陷入困境，撞到了墙上，因为我对JS很陌生，无法解决这个问题。

基本上，我有一个民意调查，允许最多检查3个复选框。复选框不可见，但隐藏，我使用图像进行选择。输出的布局如下：

<div id="options">
  <div class="option">
    <div class="overlay"></div>
    <input type="checkbox" id="rank-answer-#" class="mycheckbox" />
    <img src"..." />
  </div>
  ...more <div class="options"> repeating with same format...
</div>

我尝试做的是当用户选择第一个选项时，叠加DIV填充1，当他们选择第2个时，该选项的叠加div填充为2，依此类推等等第3种选择。这就是我到目前为止所做的：

jQuery(document).ready(function($) {
  jQuery(".mycheckbox").click(function(){
    if(jQuery(this).is(':checked')) {
        var overlaydiv = jQuery(this).prev().attr("class");
        jQuery('.' + overlaydiv).html(#);
    }
  });
});

这就是我的全部。我真的不知道从哪里去。再次感谢您的帮助！

编辑：通过Disha V。的建议。

已编辑（更新）：

所以，我已经改变了结构和jQuery，并且变得越来越接近了，但是我无法在那里完成任务。就结构而言，这就是我所拥有的。

<div class="option">
  <div class="overlay"></div>
  <input type="checkbox" name="checkform" class="oneselect1" />
</div>
<div class="option">
  <div class="overlay"></div>
  <input type="checkbox" name="checkform" class="oneselect1" />
</div>
<div class="option">
  <div class="overlay"></div>
  <input type="checkbox" name="checkform" class="oneselect1" />
</div>

这是我的jQuery：

jQuery(function($){
  $('.oneselect1').change(function(){
    if(this.checked) {
        $(this).addClass('checked1');
        $(this).removeClass('oneselect1');
        $('.oneselect1').addClass('twoselect2');
        $('.twoselect2').removeClass('oneselect1');
    }
   });
});

jQuery(function($){
  $('.twoselect2').change(function(){
    if(this.checked) {
        $(this).addClass('checked2');
        $(this).removeClass('twoselect2');
        $(this).removeClass('checked1');
        $('.twoselect2').addClass('threeselect3');
        $('.threeselect3').removeClass('twoselect2');
    }
  });
});

jQuery(function($){
  $('.threeselect3').change(function(){
    if(this.checked) {
        $(this).addClass('checked3');
        $(this).removeClass('threeselect3');
        $(this).removeClass('checked2');
        $('.threeselect3').addClass('noselect');
        $('.noselect').removeClass('threeselect3');
    }
  });
});

当我选中第一个框时，一切都正确更改。当我检查第二个框时，没有任何变化，除了checkbox1也被添加到第二个复选框。如果我将它们嵌套在彼此内部，它会正确运行，直到我取消选中其中一个。你可以看到JSFiddle HERE。你可以看到它嵌套HERE。

正如您所看到的，我可以删除添加的其他类，但是当我取消选中它时，它会变得非常混乱。请帮忙！

Answer 1

添加课程＆＃34; mycheckbox＆＃34;要复选框和删除功能，请添加属性rank以获取选中复选框的顺序

<input type="checkbox" id="rank-answer-#" class="mycheckbox" rank="1" />
<input type="checkbox" id="rank-answer-#" class="mycheckbox" rank="2" />
<input type="checkbox" id="rank-answer-#" class="mycheckbox" rank="3" />

您应该在文档中编写代码，如下所示：

jQuery(document).ready(function($) {

    jQuery(".mycheckbox").click(function(){
        if(jQuery(this).is(':checked')) {
            var overlaydiv = jQuery(this).prev().attr("class");
            jQuery('.' + overlaydiv).html(#);
            alert(jQuery(this).attr("rank")); // alerts rank of checkbox
        }
    });

});

Answer 2

我的一位朋友，他对JS / jQuery很擅长，给我写了一些代码，它的作用令人惊讶！

(function ($) {
var form = $( "#form");
var choiceClasses = [ "choice1", "choice2", "choice3" ];
form.on( "change", "input:checkbox", function ( e ) {
    var parentContainer = $(this).parent();
    if ( parentContainer.is( "[class*='choice']" ) ) {
        var classes = parentContainer.attr( "class" );
        var choice = classes.split( " " ).find( function ( v ) {
            return v.match( /choice[0-9]+/ );
        });
        choiceClasses.unshift( choice );
        choiceClasses.sort();
        parentContainer.removeClass( choice );
    } else {
        parentContainer.addClass( choiceClasses.shift() );
    }
  });
})(jQuery);

你可以看到它在行动中的小提琴 HERE 。

jQuery不同的类 - 轮询选项选择第1，第2，第3

2 个答案: