Question

所以我一直在努力解决这个问题，我将创建几个复选框组，我希望使用相同的通用类来提高效率，但我决定使用一种＆＃34;评级系统＆＃ 34;通过从其中一个字段集中选择5个复选框之一来检查或取消选中其他复选框。

例如：通过选中3复选框，将检查1,2和3，但取消选中4和5。

但是，由于我在页面上有很多字段集，因此它们相互干扰。这就是我在HTML中的含义：

<p>Example 1</p>
<fieldset id="field1">
    <input type="checkbox" name="forca" class="checkOne" />
    <input type="checkbox" name="forca" class="checkTwo" />
    <input type="checkbox" name="forca" class="checkThree" />
    <input type="checkbox" name="forca" class="checkFour" />
    <input type="checkbox" name="forca" class="checkFive" />
</fieldset>

<p>Example 2</p>
<fieldset id="field2">
    <input type="checkbox" name="destreza" class="checkOne" />
    <input type="checkbox" name="destreza" class="checkTwo" />
    <input type="checkbox" name="destreza" class="checkThree" />
    <input type="checkbox" name="destreza" class="checkFour" />
    <input type="checkbox" name="destreza" class="checkFive" />
</fieldset>

使用以下Jquery代码：

<script type="text/javascript">
jQuery(".checkOne").click(function() {
    jQuery('.checkOne').prop('checked', true);
    jQuery('.checkTwo').prop('checked', false);
    jQuery('.checkThree').prop('checked', false);
    jQuery('.checkFour').prop('checked', false);
    jQuery('.checkFive').prop('checked', false);
});
jQuery(".checkTwo").click(function() {
    jQuery('.checkOne').prop('checked', true);
    jQuery('.checkTwo').prop('checked', true);
    jQuery('.checkThree').prop('checked', false);
    jQuery('.checkFour').prop('checked', false);
    jQuery('.checkFive').prop('checked', false);
});
jQuery(".checkThree").click(function() {
    jQuery('.checkOne').prop('checked', true);
    jQuery('.checkTwo').prop('checked', true);
    jQuery('.checkThree').prop('checked', true);
    jQuery('.checkFour').prop('checked', false);
    jQuery('.checkFive').prop('checked', false);
});
jQuery(".checkFour").click(function() {
    jQuery('.checkOne').prop('checked', true);
    jQuery('.checkTwo').prop('checked', true);
    jQuery('.checkThree').prop('checked', true);
    jQuery('.checkFour').prop('checked', true);
    jQuery('.checkFive').prop('checked', false);
});
jQuery(".checkFive").click(function() {
    jQuery('.checkOne').prop('checked', true);
    jQuery('.checkTwo').prop('checked', true);
    jQuery('.checkThree').prop('checked', true);
    jQuery('.checkFour').prop('checked', true);
    jQuery('.checkFive').prop('checked', true);
});
</script>

正如我所说。我的问题是它有效，但是，Example1干扰了Example2。有没有办法做到这一点，但是，使jQuery只能在相同的Fieldsets中工作？

Answer 1

这是一种方式：

$('#field1 input, #field2 input').click(function() {
  $(this).prop('checked', true).siblings().prop('checked', false).end().addBack().prevAll().prop('checked', true)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Example 1</p>
<fieldset id="field1">
  <input type="checkbox" name="forca" class="checkOne" />
  <input type="checkbox" name="forca" class="checkTwo" />
  <input type="checkbox" name="forca" class="checkThree" />
  <input type="checkbox" name="forca" class="checkFour" />
  <input type="checkbox" name="forca" class="checkFive" />
</fieldset>

<p>Example 2</p>
<fieldset id="field2">
  <input type="checkbox" name="destreza" class="checkOne" />
  <input type="checkbox" name="destreza" class="checkTwo" />
  <input type="checkbox" name="destreza" class="checkThree" />
  <input type="checkbox" name="destreza" class="checkFour" />
  <input type="checkbox" name="destreza" class="checkFive" />
</fieldset>

它的工作方式是点击输入，保持输入检查，取消检查所有兄弟姐妹，然后检查所有兄弟姐妹在检查之前。虽然不影响其他群体。

Answer 2

您甚至不需要在复选框上安排课程...
请参阅此Fiddle。

使用此：

$("input[type='checkbox']").click(function(){
    $(this).prop('checked', true);
    $(this).prevUntil("fieldset").prop('checked', true);    // check all previous checkboxes in the same fieldset
    $(this).nextUntil("fieldset").prop('checked', false);   // uncheck all next checkboxes in the same fieldset
});

Answer 3

要确保单击复选框仅影响同一父字段集下的复选框，您可以修改下面的功能

 jQuery(".checkOne").click(function() {
     var $field = $(this).parent();
     $field.find('.checkOne').prop('checked', true);
     $field.find('.checkTwo').prop('checked', false);
     $field.find('.checkThree').prop('checked', false);
     $field.find('.checkFour').prop('checked', false);
     $field.find('.checkFive').prop('checked', false);
 });

但我注意到这种方法存在其他几个问题。就像再次单击该复选框一样，您将无法取消选中它。

Answer 4

不确定您要完成的是什么，但您可以使用jquery以多种方式限制选择器：

jQuery('#field2').find('.check1');

或：

jQuery('#field2 .check1');

补充阅读：full jquery selector documentation

Answer 5

我希望这会有所帮助，这对我有用。

＆＃13;

$('input[type="checkbox"]').click(function(e){
  var parent = this.parentNode.children
  $(parent).attr('checked', false)
  var index = Array.from(parent).indexOf(this) 
  var selection = Array.from(parent).slice(0, index +1).map(function(item){
    item.checked = true
  })
  
  
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<p>Example 1</p>
<fieldset id="field1">
    <input type="checkbox" name="forca" class="checkOne" />
    <input type="checkbox" name="forca" class="checkTwo" />
    <input type="checkbox" name="forca" class="checkThree" />
    <input type="checkbox" name="forca" class="checkFour" />
    <input type="checkbox" name="forca" class="checkFive" />
</fieldset>

<p>Example 2</p>
<fieldset id="field2">
    <input type="checkbox" name="destreza" class="checkOne" />
    <input type="checkbox" name="destreza" class="checkTwo" />
    <input type="checkbox" name="destreza" class="checkThree" />
    <input type="checkbox" name="destreza" class="checkFour" />
    <input type="checkbox" name="destreza" class="checkFive" />
</fieldset>

＆＃13;

Answer 6

这很有效。

var doc = document;
var forca = doc.getElementsByName('forca');
var destreza = doc.getElementsByName('destreza');
var inputs = document.getElementsByTagName('input');

for (var i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener("click", function(){
    if(this.checked){
      check(this.className, this.name);
    } else {
      //alert('i fired');
      uncheck(this.className, this.name);
    }
  });
}

function check(number,name){
  number = numberizer(number);  
  if(name==='forca'){
    for (var i = 0; i < number; i++) {
      forca[i].checked = true;
    }    
  }
  if(name==='destreza'){
    for (var i = 0; i < number; i++) {
      destreza[i].checked = true;
    }
  }
}

function uncheck(number,name){
  number = numberizer(number);
  if(name==='forca'){
    for (var i = number; i < 5; i++) {
      forca[i].checked = false;
    }
  }
  if(name==='destreza'){
    for (var i = number; i < 5; i++) {
      destreza[i].checked = false;
    }
  }
}

function numberizer(number){
  switch (number) {
    case "checkOne":
        return 1;
        break;
    case "checkTwo":
        return 2;
        break;
    case "checkThree":
        return 3;
        break;
    case "checkFour":
        return 4;
        break;
    case "checkFive":
        return 5;
        break;
  } 
}

<p>Example 1</p>
<fieldset id="field1">
    <input type="checkbox" name="forca" class="checkOne" />
    <input type="checkbox" name="forca" class="checkTwo" />
    <input type="checkbox" name="forca" class="checkThree" />
    <input type="checkbox" name="forca" class="checkFour" />
    <input type="checkbox" name="forca" class="checkFive" />
</fieldset>

<p>Example 2</p>
<fieldset id="field2">
    <input type="checkbox" name="destreza" class="checkOne" />
    <input type="checkbox" name="destreza" class="checkTwo" />
    <input type="checkbox" name="destreza" class="checkThree" />
    <input type="checkbox" name="destreza" class="checkFour" />
    <input type="checkbox" name="destreza" class="checkFive" />
</fieldset>

如何选择具有相同类的复选框，但只能在同一个Fieldset中？

6 个答案: