<script type="text/javascript">
$(document).ready(function() {
// select all radio buttons in the "new" column (.new class)
$('#select_all_new').click(function(){
var checked_status = this.checked;
$("input[class=new]").each(function(){
this.checked = checked_status;
});
});
// select all radio buttons in the "old" column (.old class)
$('#select_all_old').click(function(){
var checked_status = this.checked;
$("input[class=old]").each(function(){
this.checked = checked_status;
});
});
// when an item's radio button is clicked, uncheck both "select all" radio buttons
$('input[type=radio]:not([name=select_all])').click(function(){
$('input:radio[name=select_all]').attr('checked', false);
});
});
</script>
<table>
<tr>
<td>Browser:</td>
<td><input class='new' name='Browser' type='radio' value='new' checked="checked" /> Firefox</td>
<td><input class='old' name='Browser' type='radio' value='old' /> Opera</td>
</tr>
<tr>
<td>Connection Type:</td>
<td><input class='new' name='Connection' type='radio' value='new' checked="checked" /> DSL</td>
<td><input class='old' name='Connection' type='radio' value='old' /> OC-3</td>
</tr>
<tr>
<td>Education:</td>
<td><input class='new' name='Education' type='radio' value='new' checked="checked" /> High School</td>
<td><input class='old' name='Education' type='radio' value='old' /> University</td>
</tr>
<tr>
<td>Ethnicity:</td>
<td><input class='new' name='Ethnic' type='radio' value='new' checked="checked" /> Caucasian</td>
<td><input class='old' name='Ethnic' type='radio' value='old' /> Hispanic</td>
</tr>
<tr>
<td></td>
<td><input id='select_all_new' name='select_all' value='all_new' type="radio" />Select All</td>
<td><input id='select_all_old' name='select_all' value='all_old' type="radio" />Select All</td>
</tr>
</table>
Refactorings
No refactoring yet !
Dharmang
August 3, 2010, August 03, 2010 09:37, permalink
No rating.
Login to rate!
I am using value of select to differentiate between the classes, other approach may be possible also.
<script type="text/javascript">
$(document).ready(function() {
// select all radio buttons in the corresponding column (defined by class)
$('input[name=select_all]').click(function(){
var checked_status = this.checked;
var className = ($(this).val() == 'all_new') ? 'new' : 'old';
$("input[class="+className+"]").each(function(){
this.checked = checked_status;
});
});
// when an item's radio button is clicked, uncheck both "select all" radio buttons
$('input[type=radio]:not([name=select_all])').click(function(){
$('input:radio[name=select_all]').attr('checked', false);
});
});
</script>
<table>
<tr>
<td>Browser:</td>
<td><input class='new' name='Browser' type='radio' value='new' checked="checked" /> Firefox</td>
<td><input class='old' name='Browser' type='radio' value='old' /> Opera</td>
</tr>
<tr>
<td>Connection Type:</td>
<td><input class='new' name='Connection' type='radio' value='new' checked="checked" /> DSL</td>
<td><input class='old' name='Connection' type='radio' value='old' /> OC-3</td>
</tr>
<tr>
<td>Education:</td>
<td><input class='new' name='Education' type='radio' value='new' checked="checked" /> High School</td>
<td><input class='old' name='Education' type='radio' value='old' /> University</td>
</tr>
<tr>
<td>Ethnicity:</td>
<td><input class='new' name='Ethnic' type='radio' value='new' checked="checked" /> Caucasian</td>
<td><input class='old' name='Ethnic' type='radio' value='old' /> Hispanic</td>
</tr>
<tr>
<td></td>
<td><input id='select_all_new' name='select_all' value='all_new' type="radio" />Select All</td>
<td><input id='select_all_old' name='select_all' value='all_old' type="radio" />Select All</td>
</tr>
</table>
Casey
August 4, 2010, August 04, 2010 11:46, permalink
No rating.
Login to rate!
<script type="text/javascript">
$(document).ready(function() {
function selectAll(set) {
var $set = $(set);
return function () {
var checked_status = this.checked;
$set.each(function(){
this.checked = checked_status;
});
}
}
// select all radio buttons in the "new" column (.new class)
$('#select_all_new').click(selectAll("input[class=new]"));
$('#select_all_old').click(selectAll("input[class=old]"));
// when an item's radio button is clicked, uncheck both "select all" radio buttons
$('input[type=radio]:not([name=select_all])').click(function(){
$('input:radio[name=select_all]').attr('checked', false);
});
});
</script>
<table>
<tr>
<td>Browser:</td>
<td><input class='new' name='Browser' type='radio' value='new' checked="checked" /> Firefox</td>
<td><input class='old' name='Browser' type='radio' value='old' /> Opera</td>
</tr>
<tr>
<td>Connection Type:</td>
<td><input class='new' name='Connection' type='radio' value='new' checked="checked" /> DSL</td>
<td><input class='old' name='Connection' type='radio' value='old' /> OC-3</td>
</tr>
<tr>
<td>Education:</td>
<td><input class='new' name='Education' type='radio' value='new' checked="checked" /> High School</td>
<td><input class='old' name='Education' type='radio' value='old' /> University</td>
</tr>
<tr>
<td>Ethnicity:</td>
<td><input class='new' name='Ethnic' type='radio' value='new' checked="checked" /> Caucasian</td>
<td><input class='old' name='Ethnic' type='radio' value='old' /> Hispanic</td>
</tr>
<tr>
<td></td>
<td><input id='select_all_new' name='select_all' value='all_new' type="radio" />Select All</td>
<td><input id='select_all_old' name='select_all' value='all_old' type="radio" />Select All</td>
</tr>
</table>
These two blocks are virtually identical, with the exception of the words "old" or "new" in each block.
There are two columns (referred to as "new" and "old") containing multiple items.
Radio buttons allow you to select an item from either the "new" or the "old" list.
Each radio button is identified with class="new" or class="old".
At the bottom of each column, there are "select all" checkboxes for each column. When "select_all_new" is clicked, it selects all of the ".new" items, and likewise for "select_all_old".
In order to make this work, I'm using two nearly-identical code blocks.
Can they be refactored down into one block?