我有组复选框,如果这个组的行为类似具有相同名称属性的radiobuttons,我喜欢。
每个复选框都有不同的名称。
只能从复选框中选择一个。
我怎么能这样做?
解决方案
为什么我需要这个? 因为我们需要一致性webUI。 请问,这不是我们的应用程序架构的问题。 :)
HTML示例
<div class="multiCheckBox">
<span class="multiGroup">
<div><input class="multiItem" value="111" name="list" type="checkbox" />111</div>
<div><input class="multiItem" value="112" name="list" type="checkbox" />112</div>
<div><input class="multiItem" value="113" name="list" type="checkbox" />113</div>
</span>
<span>
<div><input class="multiItem" value="121" name="list" type="checkbox" />121</div>
<div><input class="multiItem" value="122" name="list" type="checkbox" />122</div>
<div><input class="multiItem" value="133" name="list" type="checkbox" />123</div>
</span>
<span>
<div><input class="multiItem" value="131" name="list" type="checkbox" />131</div>
<div><input class="multiItem" value="132" name="list" type="checkbox" />132</div>
<div><input class="multiItem" value="133" name="list" type="checkbox" />133</div>
</span>
</div>
的JavaScript
var $groups = $("span.multiGroup", $that);
$groups.each(function() {
var $group = $(this);
var $checkboxes = $(":checkbox", $group);
$checkboxes.click(function() {
var $activeCheckbox = $(this);
var state = $activeCheckbox.attr('checked');
$checkboxes.attr('checked', false);
$activeCheckbox.attr('checked', state);
});
});
答案 0 :(得分:67)
这是一个提示:使用单选按钮。 ;)
我不建议这样做,因为它会被认为对可用性不利,并且肯定会违反最少惊喜的原则。用户已经习惯于期望无线电接受1个检查,并且复选框接受许多。 Don't make your users think.
如果你有理由,这里是如何用jQuery做的:
<input type='checkbox' name='mygroup1' value='1' class='unique'>
<input type='checkbox' name='mygroup2' value='2' class='unique'>
<input type='checkbox' name='mygroup3' value='3' class='unique'>
和jQuery:
var $unique = $('input.unique');
$unique.click(function() {
$unique.filter(':checked').not(this).removeAttr('checked');
});
这是一个live sample。
修改强>:
正如评论中所指出的,这将允许用户取消选择所有复选框,即使他们最初选择了一个,这与单选按钮不完全相同。如果你想要这个,那么jQuery看起来像这样:
var $unique = $('input.unique');
$unique.click(function() {
$unique.removeAttr('checked');
$(this).attr('checked', true);
});
答案 1 :(得分:6)
为什么不使用单选按钮呢?
差异是有原因的。它是以这种方式设计的,从用户的角度来看,单选按钮意味着“选择一个”,而复选框意味着“选择多个”。
不要通过改变这种经过良好尝试的范例来打破用户的期望。当应用程序开发人员更喜欢“看起来”而不是可用性和约定时,这是一件坏事,所以不要成为其中之一。
用户界面起作用,因为使用的隐喻(复选框,按钮,鼠标指针的形状,颜色等)是以某种方式表现的。用户将遇到您的应用程序问题,甚至可能不知道为什么当您执行此类操作时。
这是一种反模式,与使用复选框状态更改标签属于同一类别:
[ ] enable option vs. [ ] option [x] disable option [x] option
答案 2 :(得分:2)
我有类似的问题。我无法使用单选按钮,因为在某些情况下,相同的表单必须显示多个选项复选框。我拿了你的标记并写了一小段jQuery:
$("span.multiGroup input").click(function() {
$("span.multiGroup input").attr('checked', false);
$(this).attr('checked', true);
});
答案 3 :(得分:1)
$(".checkboxClass").click(function() {
$(".checkboxClass").each(function() {
$(this)[0].checked = false;});
$(this)[0].checked = true;
});
首先清除所有复选框,然后检查单击的复选框。
答案 4 :(得分:1)
var $unique = $('input.unique');
$unique.click(function() {
$checked = $(this).is(':checked') ; // check if that was clicked.
$unique.removeAttr('checked'); //clear all checkboxes
$(this).attr('checked', $checked); // update that was clicked.
});
答案 5 :(得分:0)
<强> HTML 强>
<input type='checkbox' name='mygroup1' value='1' class='unique'>
<input type='checkbox' name='mygroup2' value='2' class='unique'>
<input type='checkbox' name='mygroup3' value='3' class='unique'>
<强>的Javascript 强>
$('input.unique').each(function() {
$(this).on('touchstart click', function() {
$('input.unique').not(this).removeAttr('checked');
});
});
答案 6 :(得分:0)
如果您的页面上只有一组这样的答案,那么Pablo的答案会很有效。我试图解决一个让我遇到麻烦的引导实现时遇到了这个问题,因为单选按钮已被完全覆盖,事实证明只使用复选框作为单选按钮会更容易。
这是此代码的一个版本,它通过引用调用元素的第二个类来允许多个集合。
$('input.unique').each(function() {
$(this).on('touchstart click', function() {
var secondClass = $(event.target).attr('class').split(' ')[1];
$('input.' + secondClass).not(this).removeAttr('checked');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='checkbox' name='mygroup1' value='1' class='unique check1'>
<input type='checkbox' name='mygroup2' value='2' class='unique check1'>
<input type='checkbox' name='mygroup3' value='3' class='unique check1'>
<br>
<hr>
<input type='checkbox' name='mygroup1' value='1' class='unique check2'>
<input type='checkbox' name='mygroup2' value='2' class='unique check2'>
<input type='checkbox' name='mygroup3' value='3' class='unique check2'>
答案 7 :(得分:0)
这个现场演示说明单选按钮可以执行您想要的操作:
function selectiongrp_control( s_selectiongrpName, b_useJQueryUiThemeToDecorate )
{
var ADF_THIS_IS_LAST_SELECTED_ATTR='adf_this-is-last-selected-attr'
var ADF_THIS_IS_LAST_SELECTED_VALUE='adf_this-is-last-selected-val';
if ( !s_selectiongrpName ) return -1;
$( '#fieldset-' + s_selectiongrpName + '-result' ).hide();
if( b_useJQueryUiThemeToDecorate ) $( '#jQueryUi-' + s_selectiongrpName).buttonset();
$( 'input[name=' + s_selectiongrpName + ']' ).each( function()
{
$( this ).on( 'click', function()
{
if( $( this ).attr( ADF_THIS_IS_LAST_SELECTED_ATTR ) )
{
$( this ).removeAttr( 'checked' );
$( this ).removeAttr( ADF_THIS_IS_LAST_SELECTED_ATTR );
} else
{
$( this ).attr( ADF_THIS_IS_LAST_SELECTED_ATTR, ADF_THIS_IS_LAST_SELECTED_VALUE );
}
$( 'input[name=' + s_selectiongrpName + ']' ).not( this ).removeAttr( ADF_THIS_IS_LAST_SELECTED_ATTR );
if( b_useJQueryUiThemeToDecorate ) $( '#jQueryUi-' + s_selectiongrpName ).buttonset( 'refresh' );
if( $( 'input[name=' + s_selectiongrpName + ']:checked' ).length > 0 )
{
$( '#fieldset-' + s_selectiongrpName + '-resultarea' ).html( 'You have selected : [' + $( this ).val() + '].');
} else
{
$( '#fieldset-' + s_selectiongrpName + '-resultarea' ).html( 'Nothing is selected.' );
}
$( '#fieldset-' + s_selectiongrpName + '-result' ).show();
});
});
}
$( document ).ready( function() {
var ADF_USE_JQUERYUI_THEME_TO_DECORATE=true;
selectiongrp_control( 'selectiongrp-01', !ADF_USE_JQUERYUI_THEME_TO_DECORATE );
selectiongrp_control( 'selectiongrp-02', ADF_USE_JQUERYUI_THEME_TO_DECORATE );
});
<!-- 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.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.css'>
<link rel="stylesheet" type="text/css" href='http://code.jquery.com/ui/1.11.4/themes/ui-darkness/jquery-ui.css'>
<link rel="stylesheet" type="text/css" href='http://code.jquery.com/ui/1.11.4/themes/blitzer/jquery-ui.css'>
<link rel="stylesheet" type="text/css" href='http://code.jquery.com/ui/1.11.4/themes/eggplant/jquery-ui.css'>
<link rel="stylesheet" type="text/css" href='http://code.jquery.com/ui/1.11.4/themes/flick/jquery-ui.css'>
<link rel="stylesheet" type="text/css" href='http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'>
<link rel="stylesheet" type="text/css" href='http://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.css'>
-->
<link rel="stylesheet" type="text/css" href='http://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css'>
<h3>Plain (without 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='Yes' id='selectiongrp-01-option-Y'/><label for='selectiongrp-01-option-Y'>Yes</label>
<input type='radio' name='selectiongrp-01' value='No' id='selectiongrp-01-option-N'/><label for='selectiongrp-01-option-N'>No</label>
<input type='radio' name='selectiongrp-01' value='Unknown' id='selectiongrp-01-option-U' /><label for='selectiongrp-01-option-U'>Unknown</label>
</span>
</fieldset>
<fieldset id='fieldset-selectiongrp-01-result'>
<legend>Result</legend>
<span id='fieldset-selectiongrp-01-resultarea'></span>
</fieldset>
<br/>
<h3>Decorated by "jQueryUI Theme":</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='Yes' id='selectiongrp-02-option-Y'/><label for='selectiongrp-02-option-Y'>Yes</label>
<input type='radio' name='selectiongrp-02' value='No' id='selectiongrp-02-option-N'/><label for='selectiongrp-02-option-N'>No</label>
<input type='radio' name='selectiongrp-02' value='Unknown' id='selectiongrp-02-option-U' /><label for='selectiongrp-02-option-U'>Unknown</label>
</span>
</fieldset>
<fieldset id='fieldset-selectiongrp-02-result'>
<legend>Result</legend>
<span id='fieldset-selectiongrp-02-resultarea'></span>
</fieldset>
答案 8 :(得分:0)
根据“单选按钮组”的原始行为,在同一组中只能选择一个单选按钮,“单选按钮方法”始终优于“复选框方法”,因为它可以帮助防止异常数据提交无法正确加载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>