将类添加到所有以前的单选按钮和所选单选按钮

Question

我正在使用一些简单的代码，但无法对其进行排序:(我想将颜色（类）添加到所选的单选按钮和之前的单元格...例如，如果选择了按钮No3 1,2,3应该有一个新的颜色。

这是一个简单的代码

<form>
    <ul>
        <li>
            <input id="radio1" type="radio" name="radio[]" value="1">
            <label for="radio1">one</label>
        </li>
        <li>
            <input id="radio2" type="radio" name="radio[]" value="2">
            <label for="radio2">two</label>
        </li>
        <li>
            <input id="radio3" type="radio" name="radio[]" value="3">
            <label for="radio3">three</label>
        </li>
        <li>
            <input id="radio4" type="radio" name="radio[]" value="4">
            <label for="radio4">four</label>
        </li>
        <li>
            <input id="radio5" type="radio" name="radio[]" value="5">
            <label for="radio5">five</label>
        </li>
    </ul>

我尝试使用.prevAll（），但显然它没有用。

这是当前脚本，它将类添加到所有按钮

$(document).ready(function(e) { 
    $("input[type=radio]").click(function(){
        $('form ul li input[type=radio] + label').addClass('abc');
    })  
});

演示 https://jsfiddle.net/8jct6tfs/2/

我应该使用循环吗？任何帮助将不胜感激

Answer 1

  

使用所点击元素的.index() closest元素的li和使用:lt（索引小于指定的元素）选择器，应用类

试试这个：

$(document).ready(function(e) {
  $("input[type=radio]").click(function() {
    $('form ul li input[type=radio] + label').removeClass('abc')
    var index = $(this).closest('li').index();
    $('form ul li input[type=radio] + label:lt("' + index + '")').addClass('abc');
  })
});

form {
  max-width: 500px;
  margin-top: 25px;
}
form ul li {
  display: inline-block;
  width: 20%;
  text-align: center;
  vertical-align: top;
  float: left;
  position: relative
}
input {
  position: relative;
  top: 0;
  left: 50%;
  margin-left: -6px;
  display: none;
}
input[type=radio]:checked + label::before {
  content: '';
  position: absolute;
  border-radius: 100%;
  left: 50%;
  top: 0;
  width: 30px;
  height: 30px;
  margin: -12px 0 0 -15px;
  background-color: red;
}
input[type=radio] + label::before {
  content: '';
  position: absolute;
  border-radius: 100%;
  left: 50%;
  top: 0;
  width: 30px;
  height: 30px;
  margin: -12px 0 0 -15px;
  background-color: gray;
}
label {
  padding-top: 55px;
}
/*this class should be added*/

input[type=radio] + label.abc::before {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
  <ul>
    <li>
      <input id="radio1" type="radio" name="radio[]" value="1">
      <label for="radio1">one</label>
    </li>
    <li>
      <input id="radio2" type="radio" name="radio[]" value="2">
      <label for="radio2">two</label>
    </li>
    <li>
      <input id="radio3" type="radio" name="radio[]" value="3">
      <label for="radio3">three</label>
    </li>
    <li>
      <input id="radio4" type="radio" name="radio[]" value="4">
      <label for="radio4">four</label>
    </li>
    <li>
      <input id="radio5" type="radio" name="radio[]" value="5">
      <label for="radio5">five</label>
    </li>
  </ul>
</form>

Fiddle here

Answer 2

您可以在 prevAll() ， parent() 和 siblings() 的帮助下执行此类操作

$(document).ready(function(e) {
  $("input[type=radio]").click(function() {
    $('form ul li label').removeClass('abc');
    // remove class from all elements
    $(this)
      .siblings('label').addClass('abc')
      // get label of clicked element and add class
      .parent().prevAll()
      // get all previous `li`
      .find('label').addClass('abc');
    // getting `label` inside and adding class to them
  })
});

form {
  max-width: 500px;
  margin-top: 25px;
}
form ul li {
  display: inline-block;
  width: 20%;
  text-align: center;
  vertical-align: top;
  float: left;
  position: relative
}
input {
  position: relative;
  top: 0;
  left: 50%;
  margin-left: -6px;
  display: none;
}
input[type=radio]:checked + label::before {
  content: '';
  position: absolute;
  border-radius: 100%;
  left: 50%;
  top: 0;
  width: 30px;
  height: 30px;
  margin: -12px 0 0 -15px;
  background-color: red;
}
input[type=radio] + label::before {
  content: '';
  position: absolute;
  border-radius: 100%;
  left: 50%;
  top: 0;
  width: 30px;
  height: 30px;
  margin: -12px 0 0 -15px;
  background-color: gray;
}
label {
  padding-top: 55px;
}
/*this class should be added*/

input[type=radio] + label.abc::before {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <ul>
    <li>
      <input id="radio1" type="radio" name="radio[]" value="1">
      <label for="radio1">one</label>
    </li>
    <li>
      <input id="radio2" type="radio" name="radio[]" value="2">
      <label for="radio2">two</label>
    </li>
    <li>
      <input id="radio3" type="radio" name="radio[]" value="3">
      <label for="radio3">three</label>
    </li>
    <li>
      <input id="radio4" type="radio" name="radio[]" value="4">
      <label for="radio4">four</label>
    </li>
    <li>
      <input id="radio5" type="radio" name="radio[]" value="5">
      <label for="radio5">five</label>
    </li>
  </ul>
</form>

Answer 3

尝试在此上下文中使用.closest()和.prevAll()来存档您想要的内容，

$(document).ready(function(e) {
    $("input[type=radio]").click(function(){
      $(this).closest("ul").find('li .abc').removeClass("abc");
      $(this).closest("li").prevAll("li").find("label").addClass("abc")
    })  
});

DEMO

Answer 4

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

$("input[type=radio]").click(function(){
$(this).addClass('abc');

})  
});

https://jsfiddle.net/u21cmnp1/

Answer 5

不需要javascript！

我找到了一种方法，可以根据你的需要设置所有以前的兄弟姐妹（与〜相反）。

我们假设您有一个链接列表，当悬停在一个链接上时，所有以前的链接都应该变为红色。你可以这样做：

/* default link color is blue */
.parent a {
  color: blue;
}

/* prev siblings should be red */
.parent:hover a {
  color: red;
}
.parent a:hover,
.parent a:hover ~ a {
  color: blue;
}
<div class="parent">
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
</div>

https://jsfiddle.net/aquadk/5ekjo5nx/4/

Answer 6

虽然你已经有了很多答案，但我认为我会提供一种替代方案来解决不再相关的因素，如果价值较低且值较低。选择无线电：

$(document).ready(function(e) {
  // binding to the 'change' event, rather than the 'click'
  // in order that using the <label> will also work to 
  // update the user-interface:
  $("input[type=radio]").on('change', function() {

    // finding the first ancestor <li> element, caching it
    // because we'll use it twice:
    var li = $(this).closest('li');

    // selects all the previous siblings of the <li>,
    // adds the original <li> back to the collection
    // and adds the 'abc' class-name to all selected
    // elements:
    li.prevAll().addBack().addClass('abc');

    // selects all subsequent sibling elements of the
    // original <li>, and removes the 'abc' class-name:
    li.nextAll().removeClass('abc');
  });
});

＆＃13;

＆＃13;

$(document).ready(function(e) {
  $("input[type=radio]").on('change', function() {
    var li = $(this).closest('li');
    li.prevAll().addBack().addClass('abc');
    li.nextAll().removeClass('abc');
  });
});

＆＃13;

.abc {
  background-color: #f90;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <ul>
    <li>
      <input id="radio1" type="radio" name="radio[]" value="1">
      <label for="radio1">one</label>
    </li>
    <li>
      <input id="radio2" type="radio" name="radio[]" value="2">
      <label for="radio2">two</label>
    </li>
    <li>
      <input id="radio3" type="radio" name="radio[]" value="3">
      <label for="radio3">three</label>
    </li>
    <li>
      <input id="radio4" type="radio" name="radio[]" value="4">
      <label for="radio4">four</label>
    </li>
    <li>
      <input id="radio5" type="radio" name="radio[]" value="5">
      <label for="radio5">five</label>
    </li>
  </ul>

＆＃13;

＆＃13;

＆＃13;

JS Fiddle demo

此外，如果我们检测到祖先<li>元素的变化，它会变得更紧凑和简单（因为我们不必随后找到祖先，使用{{1} }或closest()）：

parent()

＆＃13;

＆＃13;

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

  // as the 'change' event bubbles upwards
  // through the DOM it can be detected on
  // the ancestor <li> element:
  $('li').on('change', function() {

    // caching the <li> element for re-use:
    var li = $(this);

    // exactly as above:
    li.prevAll().addBack().addClass('abc');
    li.nextAll().removeClass('abc');
  });
});

＆＃13;

$(document).ready(function(e) {
  $('li').on('change', function() {
    var li = $(this);

    li.prevAll().addBack().addClass('abc');
    li.nextAll().removeClass('abc');
  });
});

＆＃13;

.abc {
  background-color: #f90;
}

＆＃13;

＆＃13;

＆＃13;

JS Fiddle demo

Answer 7

$("input[type=radio]").click(function(){
    //getting the clicked value
    last_value = $(this).val();
    //looping each radio input
    $("input[type=radio]").each(function(){
        //if value of the input is <= last_value, apply the class, else remove the class
        if($(this).val() <= last_value)
        {
            $(this).addClass('abc');
        }
        else
        {
            $(this).removeClass('abc');
        }
    })  
})