有一个问题的javascript Jquery和php按钮的复选框

Question

I have a problem with this code :

jQuery(".cb-disable").click(function(){
var parent = jQuery(this).parents('.switch');
var vid =this.id;
jQuery('#'+vid).attr('id','');
jQuery('#'+vid).attr('id','');
jQuery('.cb-enable',parent).removeClass('selected');
jQuery(this).addClass('selected');
jQuery('input[name='+vid+'-off]').attr('checked', true)
jQuery('input[name='+vid+'-on]').removeAttr('checked');
jQuery('input[name='+vid+']').attr('name', vid+"-on");
jQuery('input[name='+vid+'-off]').attr('name', vid);
});
});

because this code is correct for the example code below.

<p class="wpptabs_hoverable-286 switch">
    <input type="radio" id="ON" class="on286" name="wpptabs_hoverable-286" value="on" checked="checked">
    <input type="radio" id="OFF" class="off286" name="wpptabs_hoverable-286-off" value="off">
    <label for="ON" id="" class="cb-enable"><span>ON</span></label>
    <label for="OFF" id="" class="cb-disable selected"><span>OFF</span></label>
</p>

But it isn't correct. Can you help me? This code is based on http://devgrow.com/iphone-style-switches/ for php generating a checkbox in table column. I have question: "What is wrong in this javascript code?". Sorry for my english, but I rarely write in this language

Answer 1

Your names have to be the same for each radio input, otherwise they act independently (meaning they can show both on and off state) — in the code below I have deleted the -off part in the name for the off radio:

<p class="wpptabs_hoverable-286 switch">
  <input type="radio" id="ON" class="on286" name="wpptabs_hoverable-286" value="on" checked="checked">
  <input type="radio" id="OFF" class="off286" name="wpptabs_hoverable-286" value="off">
  <label for="ON" id="" class="cb-enable"><span>ON</span></label>
  <label for="OFF" id="" class="cb-disable selected"><span>OFF</span></label>
</p>

You can see that the on and off buttons now work as expected here:

http://jsfiddle.net/S8qFT/

update

It seems that getting the radios to work wasn't your only issue. I've simplified the javascript so it only does what it needs to, it should work as you required now.

http://jsfiddle.net/65JRx/

javscript

/// make sure we apply the click handling to both on and off labels
$(".cb-enable,.cb-disable").click(function(){
    /// find the elements we need
    var self = $(this);
    var parent = self.parents('.switch');
    /// handle the selected highlight, first remove all selected
    parent.find('.selected').removeClass('selected');
    /// then select the right one again
    self.addClass('selected');
    /// most modern browsers should handle transfering the label click
    /// to the actual radio (via `for` and `id`), but just in case.
    if ( self.is('.cb-enable') ) {
        parent.find('input[value=on]').prop('checked', true);
    }
    else {
        parent.find('input[value=off]').prop('checked', true);
    }
});

markup

<div class="wpptabs_hoverable-286 switch">
    <!-- I've laid these inputs out just to make them
    easier to read, I wouldn't normally lay markup out
    this way //-->
    <input 
        type="radio" 
        class="on286" 
        name="wpptabs_hoverable-286" 
        id="wpptabs_hoverable-286-on" 
        value="on" 
        checked="checked"
    />
    <!-- I've renamed your IDs to have more specific names
    this will mean you can use this method on more than
    one set of inputs -- as long as you keep the IDs inline
    with your id convention. //-->
    <input 
        type="radio" 
        class="off286" 
        name="wpptabs_hoverable-286" 
        id="wpptabs_hoverable-286-off" 
        value="off" 
    />
    <label 
        for="wpptabs_hoverable-286-on"
        class="cb-enable selected">
        <span>ON</span>
    </label>
    <label 
        for="wpptabs_hoverable-286-off"
        class="cb-disable">
        <span>OFF</span>
    </label>
</div>

css

/**
 * Added a highlight so you can see selected working
 */
label.selected { color: blue; }

/** 
 * I've removed the display none so you can still see the inputs
 * working as they should. Obviously you can put the display none
 * back to get your working version.
 */
.switch input{/*display: none;*/ opacity: 0.5; position: relative;}