Question

Using jQuery, I hide all check-boxes and radio buttons,and use a CSS background to indicate theked status. I want to uncheck all check-boxes with radio buttons, but my implementation won’t work as my check-box is still checked although the CSS is changed:

 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>

I rewrite a Complete demo here: http://jsfiddle.net/badjohnny/MnujS/8/

Can you help me implement this correctly?

Answer 1

$(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