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

我对此代码有疑问:</ p>

  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-启用',母体).removeClass( '选择'); \ njQuery(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);
});
});
</ code> </ pre>

因为这段代码是 更正下面的示例代码。</ p>

 &lt; p class =“wpptabs_hoverable-286 switch”&gt; 
&lt; input type =“radio”id =“ON”class =“on286”name =“wpptabs_hoverable-286”value =“on”checked =“checked”&gt;
&lt; input type =“radio”id =“OFF”class =“off286”name =“wpptabs_hoverable-286- off“value =”off“&gt;
&lt; label for =”ON“id =”“class =”cb-enable“& gt;&lt; span&gt; ON&lt; / span&gt;&lt; / label&gt;
&lt; label for =“OFF”id =“”class =“cb-disable selected”&gt;&lt; span&gt; OFF&lt; / span&gt;&lt; ; / label&gt;
&lt; / p&gt;
</ code> </ pre>

但它不正确。 你能帮帮我吗?
这段代码基于 http://devgrow.com/iphone-style-switches /
for php在表格列中生成一个复选框。
我有疑问:“这个javascript代码出了什么问题?”。
抱歉我的英文,但我很少用这种语言写</ p>
</ DIV>

展开原文

原文

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

dongzheng8463
dongzheng8463 我将此添加到我的问题中
7 年多之前 回复
dqwolwst50489
dqwolwst50489 你有什么问题?
7 年多之前 回复

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;}
doufu9836
doufu9836 我的新代码工作正确,但PHP不读取js的名称;)jsfiddle.net/7pXnu/8
7 年多之前 回复
duanci1858
duanci1858 当我使用.switch输入display:none; 这段代码有bug; /。 我必须隐藏这个输入类型的收音机;)
7 年多之前 回复
douou1891
douou1891 我用新的JavaScript更新了我的答案,至少符合你的尝试。 希望能帮助到你。
7 年多之前 回复
doucan1979
doucan1979 我有问题,因为我会隐藏checbox。 jsfiddle.net/7pXnu/4
7 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问