Исходя из примитивного поведения «группы радиокнопок», когда в одной и той же группе можно выбрать только одну радиокнопку, «подход радиокнопок» всегда предпочтительнее, чем «подход флажков», поскольку это может помочь предотвратить аномальную передачу данных событие JavaScript или кодирования jQuery не может быть загружено должным образом.
Тогда единственная задача, которую мы должны решить, - это сделать выбранный переключатель «отменяемым».
Итак, вот пример, демонстрирующий, что с помощью дополнительного элемента управления JavaScript переключатели все еще можно отменить. В этом примере jQuery использовался как основная структура JavaScript.
Онлайн-версия также доступна в JSFiddle.net:
http://jsfiddle.net/0fbef3up/
В этом примере рассматривается сценарий непредвиденных обстоятельств, если не загружается кодирование JavaScript или jQuery, и поэтому предоставляется «элемент условного варианта». Чтобы увидеть, каким будет такой особый сценарий и как работает непредвиденный случай, вы можете просто пропустить загрузку библиотеки jQuery, комментируя / удаляя соответствующую строку кода:
<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.4.min.js'></script>
Ниже приведен полный код HTML / JavaScript для демонстрации. Суть в функции JavaScript 'selectiongrp_logicControl', вы можете изучить ее для справки.
JavaScript (то есть уровень управления / модель) в первом кадре кодирования и HTML (то есть уровень представления) во втором кадре кодирования:
function selectiongrp_logicControl( s_selectiongrpName, b_useJQueryUiThemeToDecorate )
{
// Safeguard measure: If the mandatory function parameter is undefined or empty, nothing can be proceed further, so quit the current function with excit code:
if ( !s_selectiongrpName ) return -1;
// Define a constant for future use:
var ADF_THIS_IS_LAST_SELECTED='adf_this-is-last-selected';
// Hide the 'contingent select option item' and all its relevant ancillary objects (i.e. the label element):
$( '#' + s_selectiongrpName + '-option-X' ).hide();
$( '#' + s_selectiongrpName + '-option-X' ).next( 'label' ).hide();
// Decorate the selection group option items and their labels by applying the jQueryUI 'buttonset' function:
if( b_useJQueryUiThemeToDecorate ) $( '#jQueryUi-' + s_selectiongrpName).buttonset();
// Loop for each option item within the selection group:
$( 'input[name=' + s_selectiongrpName + ']' ).each( function()
{
// Define an 'onClick' event for every option item within the selection group:
$( this ).on( 'click', function()
{
// If the option item being clicked is the last selected one, then de-select such item.
// Two ways can achieve de-selection, apply either one below to adapt to your programming style or desired controller mechanism.
if( $( this ).attr( ADF_THIS_IS_LAST_SELECTED ) )
{
// Way[1]: Force selecting another item within the same selection group.
// This Way entails the 'contingent select option item'. So, if you consider such 'contingent select option item' is unnecessary/inappropriate to your programming style or controller mechanism, please don't choose this Way.
// (Note: Such 'contingent select option item' was deliberately hidden at the outset).
// $( '#' + s_selectiongrpName + '-option-X' ).prop( 'checked', true );
// Way[2]: Simply remove the current item's "checked" attribute:
$( this ).removeAttr( 'checked' );
// Both Way[1] and Way[2]: Remove the additional attribute from the item being clicked.
$( this ).removeAttr( ADF_THIS_IS_LAST_SELECTED );
} else
{
// Apply an additional attribute to the item being clicked. This additional attribe functioned as a secret hint for internal reference to signify the item was the last seledcted one:
$( this ).attr( ADF_THIS_IS_LAST_SELECTED, ADF_THIS_IS_LAST_SELECTED );
}
// Other than the item being clicked, all other items (i.e. denotes by the jQuery 'not( this )' selector) should have removed such additional attribute:
$( 'input[name=' + s_selectiongrpName + ']' ).not( this ).removeAttr( ADF_THIS_IS_LAST_SELECTED );
// Force the jQueryUI engine to re-render the decoration to reflect the latest selection by applying the 'buttonset' function again ( provide the 'refresh' parameter ):
if( b_useJQueryUiThemeToDecorate ) $( '#jQueryUi-' + s_selectiongrpName ).buttonset( 'refresh' );
// Lastly, this is an optional step, refresh the Result Area for displaying user's latest selection on specific screen area:
selectiongrp_visualControl_refreshResultArea( s_selectiongrpName );
});
});
}
function selectiongrp_visualControl_refreshResultArea( s_selectiongrpName )
{
// Safeguard measure: If the mandatory function parameter is undefined or empty, nothing can be proceed further, so quit the current function with excit code:
if( !s_selectiongrpName ) return -1;
var adf_resultArea_string;
var ADF_RESULTAREA_STRING_NOTHING_SELECTED='Nothing is selected';
// If Way[1] is adopted:
if( $( '#' + s_selectiongrpName + '-option-X' ).prop( 'checked' ) )
{
adf_resultArea_string=ADF_RESULTAREA_STRING_NOTHING_SELECTED;
} else // If Way[2] is adopted:
{
// If some option items are selected within the selection group:
if( $( 'input[name=' + s_selectiongrpName + ']:checked' ).length > 0 )
{
adf_resultArea_string='You have selected : [' + $( 'input[name=' + s_selectiongrpName + ']:checked' ).next( 'label' ).text() + ']';
} else
{
adf_resultArea_string=ADF_RESULTAREA_STRING_NOTHING_SELECTED;
}
}
$( '#fieldset-' + s_selectiongrpName + '-resultarea' ).html( adf_resultArea_string );
$( '#fieldset-' + s_selectiongrpName + '-result' ).show();
}
$( document ).ready( function()
{
var ADF_USE_JQUERYUI_THEME_TO_DECORATE=true;
selectiongrp_logicControl( 'selectiongrp-01', !ADF_USE_JQUERYUI_THEME_TO_DECORATE );
selectiongrp_logicControl( 'selectiongrp-02', ADF_USE_JQUERYUI_THEME_TO_DECORATE );
// If jQuery can be loaded properly, the error message must be hidden:
$( '#jquery-compatibility-error' ).hide();
});
<!-- Load jQuery core library -->
<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.4.min.js'></script>
<!-- Load jQueryUI library -->
<script type='text/javascript' src='http://code.jquery.com/ui/1.11.4/jquery-ui.min.js'></script>
<!-- Load jQueryUI Theme library (make either one effective) -->
<!--
<link rel="stylesheet" type="text/css" href='http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.min.css'/>
<link rel="stylesheet" type="text/css" href='http://code.jquery.com/ui/1.11.4/themes/ui-darkness/jquery-ui.min.css'/>
<link rel="stylesheet" type="text/css" href='http://code.jquery.com/ui/1.11.4/themes/blitzer/jquery-ui.min.css'/>
<link rel="stylesheet" type="text/css" href='http://code.jquery.com/ui/1.11.4/themes/eggplant/jquery-ui.min.css'/>
<link rel="stylesheet" type="text/css" href='http://code.jquery.com/ui/1.11.4/themes/flick/jquery-ui.min.css'/>
<link rel="stylesheet" type="text/css" href='http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css'/>
<link rel="stylesheet" type="text/css" href='http://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.min.css'/>
-->
<link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.min.css'>
This webpage is primarily to demonstrate de-selectable radio boxes.
<h3 id='jquery-compatibility-error'>ERROR: It was detected that JavaScript or jQuery coding does not load properly, so some advance feature cannot be realised.</h3>
<h3>Style1: Raw (i.e. no styling/decoration):</h3>
<fieldset id='fieldset-selectiongrp-01'>
<legend>Please <b>click</b> to <b>select</b> or <b>re-click</b> to <b>deselect</b></legend>
<span id='jQueryUi-selectiongrp-01'>
<input type='radio' name='selectiongrp-01' value='X' id='selectiongrp-01-option-X' checked/><label for='selectiongrp-01-option-X'>None/NULL/Non-Selected <small><small>(This option is provided for contingency purpose in case JavaScript or jQuery does not load)</small></small></label>
<input type='radio' name='selectiongrp-01' value='Y' id='selectiongrp-01-option-Y'/><label for='selectiongrp-01-option-Y'>Yes</label>
<input type='radio' name='selectiongrp-01' value='N' id='selectiongrp-01-option-N'/><label for='selectiongrp-01-option-N'>No</label>
<input type='radio' name='selectiongrp-01' value='U' id='selectiongrp-01-option-U' /><label for='selectiongrp-01-option-U'>Unknown</label>
</span>
</fieldset>
<fieldset id='fieldset-selectiongrp-01-result' style='display:none'> <!-- Initaially hidden by using stylesheet attribute "style='display:none'"-->
<legend>Selection</legend>
<span id='fieldset-selectiongrp-01-resultarea'><br/></span>
</fieldset>
<br/>
<h3>Style2: Decorated by "jQueryUI Theme" <small><small>(jQueryUI Theme adopted: '<i>Redmond</i>')</small></small>:</h3>
<fieldset id='fieldset-selectiongrp-02'>
<legend>Please <b>click</b> to <b>select</b> or <b>re-click</b> to <b>deselect</b></legend>
<span id='jQueryUi-selectiongrp-02'>
<input type='radio' name='selectiongrp-02' value='X' id='selectiongrp-02-option-X' checked/><label for='selectiongrp-02-option-X'>None/NULL/Non-Selected <small><small>(This option is provided for contingency purpose in case JavaScript or jQuery does not load)</small></small></label>
<input type='radio' name='selectiongrp-02' value='Y' id='selectiongrp-02-option-Y'/><label for='selectiongrp-02-option-Y'>Yes</label>
<input type='radio' name='selectiongrp-02' value='N' id='selectiongrp-02-option-N'/><label for='selectiongrp-02-option-N'>No</label>
<input type='radio' name='selectiongrp-02' value='U' id='selectiongrp-02-option-U' /><label for='selectiongrp-02-option-U'>Unknown</label>
</span>
</fieldset>
<fieldset id='fieldset-selectiongrp-02-result'style='display:none;'> <!-- Initaially hidden by using stylesheet attribute "style='display:none'"-->
<legend>Selection</legend>
<span id='fieldset-selectiongrp-02-resultarea'><br/></span>
</fieldset>