开发者

How to make a Radio button with the same properties of a Checkbox using jQuery

开发者 https://www.devze.com 2023-03-14 00:21 出处:网络
My HTML code is <table> <tr><td><input type=\"checkbox\"></td><td><input type=\"checkbox\"></td></tr>

My HTML code is

  <table>
    <tr><td><input type="checkbox"></td><td><input type="checkbox"></td></tr>
    <tr><td><input type="checkbox"></td><td><input type="checkbox"></td></tr>
    <tr><td><input type="checkbox"></td><td><input type="checkbox"></td></tr>
    <tr><td><input type="checkbox"></td><td><input type="checkbox"></td></tr>
    <tr><td><input type="checkbox"></td><td><input type="checkbox"></td></tr>
    <tr><td><input type="checkbox"></td><td><input type="checkbox"></td></tr>
    <tr><td><input type="checkbox"></td><td><input type="checkbox"></td></tr>
    <tr><td><input type="checkbox"></td><td><input type开发者_如何转开发="checkbox"></td></tr>
   </table>

My JQuery code is (Not written by me, Some Stackoverflow use helped me on it, i am thanking him)

     $('TABLE TBODY TR').each(function()     
      {       
       var lastd =    $(this).children('tr td:last').find('input:checkbox');    
       var parentlast =   lastd.parent();       
       lastd.remove();           
       parentlast.append("<input type='radio'>"); // want to add the same properties of the removed checkbox     
      });  

Please someone help me.


Well, I don't see why you would want to do this, but you could just make it become a radio button.

$('tr:last td:last input:checkbox').prop('type', 'radio');

(this example uses jQuery 1.6)

JsFiddle Demo

UPDATE: As @kei correctly pointed out, this one won't work IE <9. So I created this one:

var $csekk=$('tr:last td:last input:checkbox'),
    $klon=$csekk.clone().attr('type', 'radio');

$csekk.after($klon).remove();

JsFiddle Demo

This one basically clones the checkbox (to keep every attribute you might have had associated with it), change the clone into a radio, inserts it and removes the old one.


Hopefully this will solve your problem.

 $('TABLE TBODY TR').each(function()
    {  
    var lastd =    $(this).children('tr td:last').find('input:checkbox');  
     var parentlast =   lastd.parent();
      lastd.remove();     
      parentlast.append("<input type='radio'>");

    });

So basically it will find last checkbox remove it from the dom and than creat a new one


Here's a plugin and tutorial to customize radio buttons and checkboxes with jQuery, CSS and image sprites.

Accessible, Custom Designed Checkbox and Radio Button Inputs Styled with CSS (and a dash of jQuery)

Since you'd be using custom created sprites, you can simply make them look like anything you want.

0

精彩评论

暂无评论...
验证码 换一张
取 消