Question

使用jQuery，我隐藏所有复选框和单选按钮，并使用CSS background来指示其状态。我想取消选中带有单选按钮的所有复选框，但我的实现不起作用，因为虽然CSS已更改，但仍然检查了我的复选框：

 var fliter_radio=$(".item input[name='group1_radio']");
 var fliter_checkbox=$(".item input[name='group1']");

 fliter_radio.next().click(function(){
                          $(this).prev()[0].checked=true; 
                          $(this).addClass("checked");

                          //#unchecked all checkbox
                          fliter_checkbox.each(function(){
                                 $(this).checked=false;
                                 $(this).next().removeClass("checked"); 
                          })
  })

<li class="item"><input type="radio" id="radio" name="group1_radio" checked="checked" value="unchecked" /><strong>radio button</strong></li>
<li class="item"><input type="checkbox" id="CheckBox1" name="group1" value="news" /><strong>Checkbox1</strong></li>
<li class="item"><input type="checkbox" id="CheckBox2" name="group1" value="news" /><strong>Checkbox2</strong></li>

我在这里重写了一个完整的演示：http://jsfiddle.net/badjohnny/MnujS/8/

你能帮我正确实现吗？

Answer 1

$(this).checked=false;至$(this).prop("checked",false);

Answer 2

$(document).ready(function() {
    function custom_uncheck(radio, checkbox) {
        var fliter_checkbox = $(checkbox);
        var fliter_radio = $(radio);

        fliter_checkbox.hide();
        fliter_radio.hide();

        fliter_radio.next().on('click', function() {

            $(this).addClass('checked')  // add checked class to strong
                  .prev().prop('checked', true); // make check the radio

            fliter_checkbox.prop('checked', false)   // make checkbox uncheck
                   .next('strong').removeClass('checked');  // remove checked class

        }).click();  // trigger the initial click

        fliter_checkbox.next('strong').on('click', function() {// click on checkbox
            $(this).toggleClass('checked')  // changing checked class
                  .prev()  // go to checkbox
                  .prop('checked', function() { // change checkbox check status
                                return !this.checked;
                           });
            // make uncheck the radio and remove checked class from strong
            fliter_radio.prop('checked', false).next().removeClass('checked');
        });
    }
    custom_uncheck('input[name="all"]', 'input[name="c"]');
});

<强> Working sample

Jquery未经检查的复选框与单选按钮

2 个答案: