Search jQuery

jQuery Forum

Using jQuery UI

ryolatl

radios as buttons in a grid

in Using jQuery UI • 8 years ago

I'm trying to use a radios in a grid but They should look like a Button, so I use the buttonset.

I'm able to see the radios as button.

here is are the problems.

1.- I cannot set one of them as Checked by default so the button look highligthed

2.- after ther first row in the grid, the second row is just not taking the properties on the radios, because I can press both at the same time.

3. does it have something to with <label for="(the id of the radio"> ????

here is a little code that I'm using

this part, is a row on the grid.

<td style="text-align: center" rowspan="2">
   <div id="views">
      <input type="radio" id="button1" name="test" class="ui-helper-hidden-accessible" value="1" checked="true" >
      <label for="button1">@Resources.Explosion.New.Current_Interface</label>
      <input type="radio" id="button2" name="test" class="ui-helper-hidden-accessible" value="0" >
      <label for="button2">Truck</label>
   </div>
</td>

and here is part of my jquery where I change the name and the id of the radios in each row...

$("#explosionResults tr").each(function () {

var $radio = $(this).find("tr:eq(1)").find('input[type=radio]');

if ($radio.length > 0) {

                $radio[0].name = rowCountername;
                $radio[1].name = rowCountername;
                //$radio[1].name = rowCountername;
                rowCountername += 1;

                $radio[0].id = rowCounterid;
                $radio[0].for = rowCounterid;
                rowCounterid += 1;

                $radio[1].id = rowCounterid;
                $radio[1].for = rowCounterid;
                rowCounterid += 1;

}
});

also remeber that I'm using to format the radios as buttons

$('#views').buttonset();

I appreciate any help on this.

Replies(12)

jakecigar

Re: radios as buttons in a grid

8 years ago

Is this what you want?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>explosionResults</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
<script type="text/javascript">
var rowCountername=0,rowCounterid=1;
$(function(){
$("#explosionResults tr").each(function () {
var $radio = $(this).find('input[type=radio]');
if ($radio.length > 0) {
$radio.attr('name',rowCountername);
rowCountername ++;
$radio.each(function(){
$('label[for="'+this.id+'"]').attr('for',rowCounterid);
this.id=rowCounterid;
rowCounterid++;
})
}
});
$('#views').buttonset();
})
</script>
</head>
<body>
<form>
<table id="explosionResults">
<td style="text-align: center" rowspan="2">
<div id="views">
<input type="radio" id="button1" name="test" class="ui-helper-hidden-accessible" value="1" checked="true" />
<label for="button1">
@Resources.Explosion.New.Current_Interface
</label>
<input type="radio" id="button2" name="test" class="ui-helper-hidden-accessible" value="0" />
<label for="button2">
Truck
</label>
</div>
</td>
</table>
</form>
</body>
</html>

JΛ̊KE

ryolatl

Re: Re: radios as buttons in a grid

8 years ago

Thanks Jake, not it is not what I want, but It may help.

With this code, in all row the radios change when you select one of them, so if you select the one on the right, all rows change to the right and same with the left.

and the other problem is that I still cannot set one of the as Cheched.

I used checked="checked" and checked="true" but nothing.

thanks anyway Jake

jakecigar

Re: radios as buttons in a grid

8 years ago

I think I uncovered the reason for not setting checked properly. Checkboxes with the same name conflicted.

Is this what you want?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>explosionResults</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
<script type="text/javascript">
var rowCountername=0,rowCounterid=1;
$(function(){
$("#explosionResults tr").each(function () {
var $radio = $(this).find('input[type=radio]');
var row=this;
console.log($radio)
if ($radio.length > 0) {
$radio.attr('name',rowCountername);
rowCountername ++;
$radio.each(function(){
console.log(this,$('label[for="'+this.id+'"]',row))
$('label[for="'+this.id+'"]:first').attr('for',rowCounterid);
this.id=rowCounterid;
rowCounterid++;
})
}
});
$('.views').each(function(){$(this).buttonset();})
})
</script>
</head>
<body>
<form>
<table id="explosionResults">
<tr>
<td style="text-align: center" rowspan="2">
<div class="views">
<input type="radio" id="button1" name="test" class="ui-helper-hidden-accessible" value="1" checked="checked" />
<label for="button1">
@Resources.Explosion.New.Current_Interface
</label>
<input type="radio" id="button2" name="test" class="ui-helper-hidden-accessible" value="0" />
<label for="button2">
Truck
</label>
</div>
</td>
</tr>
<tr>
<td style="text-align: center" rowspan="2">
<div class="views">
<input type="radio" id="button3" name="test1" class="ui-helper-hidden-accessible" value="1" checked="checked" />
<label for="button3">
@Resources.Explosion.New.Current_Interface
</label>
<input type="radio" id="button4" name="test1" class="ui-helper-hidden-accessible" value="0" />
<label for="button4">
Truck
</label>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>

JΛ̊KE

ryolatl

Re: Re: radios as buttons in a grid

8 years ago

Thank Jake

I was debugging and the name change.

this is a dynamic grid, so it could have 1 row or more.

each row is going to have 2 radios, this 2 radios need to have same name, different Id.

I know is working just with radios, my problem comes when I want to use jquery buttonset(), I cannot make work each row independently for the radios and also I cannot set one of the checked as default.

jakecigar

Re: radios as buttons in a grid

8 years ago

My demo does button sets. Where is the problem?

JΛ̊KE

ryolatl

Re: Re: radios as buttons in a grid

8 years ago

this is the first error, I can select both radios after the second row

this is the second error, if you select one of them, the rest of the same one in the other rows are selected as well, I verify that name is different and the Id is diffrerent.

and the third error is that at the moment to load the grid, I cannot set any of the options as default. (selected)

jakecigar

Re: radios as buttons in a grid

8 years ago

I think we are attacking this from the wrong end. You should generate the HTML correctly to begin with.

JΛ̊KE

ryolatl

Re: Re: radios as buttons in a grid

8 years ago

This is the row on the grid

   <tr class="parent">
      <td>
     <table cellpadding="0" cellspacing="0" width="100%">
         <tr>
            <td colspan="2">
                <b><font size="4">${($data.MarketName)}</font></b>
            </td>
            <td colspan="5" {{html (($data.NotAllCompleted) ? 'class="explosionNew"': '') }}>
               {{html (($data.NotAllCompleted) ? '<span class="ui-icon ui-icon-alert inline-block" />' : '') }}
               {{html (($data.NotAllCompleted) ? '@Resources.Explosion.New.Warning' : '') }}
               <input id="DisMarketId" type="textbox" value="${MaketDistributionId}" class="hidden"/>
               </td>
            <td>
                
            </td>
            <td style="text-align: center">
               <a href="#" data-id="${MaketDistributionId}" class="ui-icon ui-icon-trash"></a>
            </td>
         </tr>
         <tr>
            <td style="text-align: right" rowspan="2">
               @Resources.Explosion.New.Carriers
            </td>
            <td style="text-align: center" rowspan="2">
         <div id="views">
          <input type="radio" id="button1" name="test" value="1" checked="checked" />
          <label for="button1">
           @Resources.Explosion.New.Current_Interface
          </label>
          <input type="radio" id="button2" name="test" value="0" />
          <label for="button2">
         Truck
         </label>
         </div>
            </td>
            <td rowspan="2">
                
            </td>
            <td rowspan="2">
                
            </td>
            <td>
               @Resources.Explosion.New.Houses
            </td>
            <td>
                
                </td>
            <td>
               @Resources.Explosion.New.Flyers
            </td>
            <td>
                
                
            </td>
            <td rowspan="2">
                
            </td>
         </tr>
         <tr>
            <td>
               @Resources.Explosion.New.Apartments</td>
            <td>
                </td>
            <td>
               @Resources.Explosion.New.Addressed</td>
            <td>
                </td>
         </tr>
         <tr height="25px">
            <td style="text-align: right" rowspan="2">
               @Resources.Explosion.New.Include
            </td>
            <td rowspan="2">
                
            </td>
            <td rowspan="2">
               <input id="chkEXT" name="chkEXT" type="checkbox" ${ !EXT ? 'disabled="disabled"' : '' }/><label ${ !EXT ? 'disabled="disabled"' : '' }>@Resources.Explosion.New.EXT</label>
            </td>
            <td rowspan="2">
               <input id="chkNEWBG" name="chkNEWBG" type="checkbox" ${ !NEWBG ? 'disabled="disabled"' : '' }/><label ${ !NEWBG ? 'disabled="disabled"' : '' }>@Resources.Explosion.New.NEWBG</label>
            </td>
            <td>
               @Resources.Explosion.New.Businesses</td>
            <td>
                </td>
            <td>
               @Resources.Explosion.New.Flyers_Carriers</td>
            <td>
                </td>
            <td rowspan="2">
                
            </td>
         </tr>
         <tr>
            <td>
               @Resources.Explosion.New.Truckers</td>
            <td>
                </td>
            <td>
               @Resources.Explosion.New.Routes
            </td>
            <td>
                </td>
         </tr>
         </table>
      </td>
   </tr>

jakecigar