jQuery 不同的类 - 选择第 1、第 2、第 3 的轮询选项答案

【问题标题】：jQuery Different Classes - Poll Options Selected 1st, 2nd, 3rdjQuery 不同的类 - 选择第 1、第 2、第 3 的轮询选项
【发布时间】：2015-10-07 21:34:13
【问题描述】：

查看下方更新

首先，感谢您的帮助！我陷入困境并将头撞到墙上，因为我对 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，当他们选择第二个时，该选项的覆盖 div 填充 2，依此类推第四个选项。这是我目前所拥有的：

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。

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

【问题讨论】：

标签： jquery checkbox selection

【解决方案1】：

将“mycheckbox”类添加到复选框并删除功能，添加属性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
        }
    });

});

【讨论】：

好的，谢谢。我会去做的。 :) 知道如何获得第一个、第二个、第三个检查吗？
这让我更接近了，所以谢谢！不过，我需要它基于用户首先点击的内容。因此，例如，如果他们单击第三个复选框，那将被排在第 1 位。希望这是有道理的！
找到了完美的东西来展示我正在尝试做的事情！在此处查看投票：breitbart.com/primary。我正在尝试获得这样的功能，如果您单击其中一个选项，则会出现 1，然后如果您单击第二个选项，则会出现 2。

【解决方案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。

【讨论】：