我需要使用javascript操纵复选框的行为.它们基本上应该像单选按钮一样(一次只能选择一个,再取消选择以前的选择).
问题是我不能首先使用普通的单选按钮,因为每个单选按钮的名称属性会有所不同.
我知道它不是使苹果看起来像梨的最终和最闪亮的解决方案,并且w3c不会让我大拇指,但它现在比改变整个cms的核心php逻辑更好的解决方案结构体 ;-)
任何帮助深表感谢!
DJa*_*ari 72
HTML:
<label><input type="checkbox" name="cb1" class="chb" /> CheckBox1</label>
<label><input type="checkbox" name="cb2" class="chb" /> CheckBox2</label>
<label><input type="checkbox" name="cb3" class="chb" /> CheckBox3</label>
<label><input type="checkbox" name="cb4" class="chb" /> CheckBox4</label>
jQuery:
$(".chb").change(function() {
$(".chb").prop('checked', false);
$(this).prop('checked', true);
});
如果您希望用户可以取消选中所选项目:
$(".chb").change(function() {
$(".chb").not(this).prop('checked', false);
});
演示:
http://jsfiddle.net/44Zfv/724/
有很多方法可以做到这一点.这是一个包含许多复选框的div 的clickhandler(plain js):
function cbclick(e){
e = e || event;
var cb = e.srcElement || e.target;
if (cb.type !== 'checkbox') {return true;}
var cbxs = document.getElementById('radiocb')
.getElementsByTagName('input'),
i = cbxs.length;
while(i--) {
if (cbxs[i].type
&& cbxs[i].type == 'checkbox'
&& cbxs[i].id !== cb.id) {
cbxs[i].checked = false;
}
}
}
这是一个有效的例子.
小智 5
我保持简单...
<html>
<body>
<script>
function chbx(obj)
{
var that = obj;
if(document.getElementById(that.id).checked == true) {
document.getElementById('id1').checked = false;
document.getElementById('id2').checked = false;
document.getElementById('id3').checked = false;
document.getElementById(that.id).checked = true;
}
}
</script>
<form action="your action" method="post">
<Input id='id1' type='Checkbox' Name ='name1' value ="S" onclick="chbx(this)"><br />
<Input id='id2' type='Checkbox' Name ='name2' value ="S" onclick="chbx(this)"><br />
<Input id='id3' type='Checkbox' Name ='name3' value ="S" onclick="chbx(this)"><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
这是一个更好的选择，因为它还允许取消选中：
$(".cb").change(function () {
$(".cb").not(this).prop('checked', false);
});
| 归档时间： |
|
| 查看次数： |
57132 次 |
| 最近记录： |