jquery - 选中 jQuery 复选框，然后更改 ul 的颜色

Question

我有两个单选按钮。当您进入页面时，会检查第一个。然后该单选按钮下方的第一个列表可见（黑色文本颜色）。第二个列表和第二个单选按钮的文本是灰色的。

当用户检查第二个单选按钮时，两个列表必须可见（均为黑色文本颜色）。然后单选按钮 1 文本必须为灰色。

当用户从 2 切换回 1 时，请参见上文... :-)

我希望有人能帮我解决这个问题？:)

HTML：

 <div id="order-number">
      <div class="split"><input type="radio" name="number" value="5" checked>text</div>
      <div class="split"><input type="radio" name="number" value="10">text</div>
 </div>

 <div id="order-list">
      <ul>
           <li>text</li>
           <li>text</li>
           <li>text</li>
           <li>text</li>
           <li>text</li>
      </ul>

      <ul>
           <li>text</li>
           <li>text</li>
           <li>text</li>
           <li>text</li>
           <li>text</li>
      </ul>
 </div>

Answer 1

尝试

var $uls = $('#order-list > ul'), $chks = $('#order-number input:checkbox');
$chks.change(function(){
    var idx = $chks.index(this);
    $uls.eq(idx).css('opacity', this.checked ? 1 : .5)
}).change()

演示：小提琴