[英]Javascript/JQuery setting value of checkbox while disabling others
I am trying to figure something out. 我正在尝试找出答案。 I have several checkboxes which take the following form 我有几个复选框,其格式如下
<div class="checkbox">
<input name="someName1" class="checkbox styled" id="checkbox1" onclick="document.controller.setValue('/@someName1', this.checked ? '1' : '', 'someName1');" type="checkbox" value="" />
<label for="checkbox1"> SomeName 1 </label>
</div>
<div class="checkbox">
<input name="someName2" class="checkbox styled" id="checkbox2" onclick="document.controller.setValue('/@someName2', this.checked ? '1' : '', 'someName2');" type="checkbox" value="" />
<label for="checkbox2"> SomeName 2 </label>
</div>
The controller is needed to set the value in some system that I am using. 需要控制器来设置我正在使用的某些系统中的值。 Now the above seems to work, if I check both, they are both recorded in my system. 现在上面的方法似乎可以正常工作,如果我同时检查它们,它们都记录在我的系统中。 If I check one and then uncheck it, it is not recorded. 如果我选中一个然后取消选中它,则不会记录它。
The problem comes because I only want them to be able to select one option (I know radio buttons are for this, but I need to use checkboxes). 出现问题是因为我只希望他们能够选择一个选项(我知道单选按钮适用于此,但是我需要使用复选框)。
So I have the following 所以我有以下
$('input.styled').on('change', function() {
$('input.styled').not(this).prop('checked', false);
});
And that makes sures that only one is selected. 这样可以确保仅选择一个。 However, because of the onclick event, if I check a checkbox and the check a different checkbox (then the above code turns the initial one off), both checkboxes are being recorded as being checked in my system. 但是,由于onclick事件,如果我选中一个复选框,然后选中另一个复选框(然后上面的代码关闭了最初的复选框),则两个复选框都记录为在我的系统中被选中。
Therefore, I think I need to do something with my onclick event, to turn it off somehow if the checkbox is no longer checked. 因此,我认为我需要对onclick事件进行处理,如果不再选中该复选框,则应以某种方式将其关闭。
I was thinking about doing something like the following 我正在考虑做以下事情
$('.checkbox').change(function() {
if($(this).is(":checked")) {
$value = $(this).attr("name");
document.controller.setValue('/@'+$value, this.checked ? '1' : '', 'checkbox');
}
});
So if the checkbox is checked, apply the setValue function to the checkbox who's name attribute has selected it. 因此,如果选中该复选框,则将setValue函数应用于其name属性已选中它的复选框。 If it is unchecked, I need to somehow reverse this. 如果未选中,则需要以某种方式将其撤消。
How would I go about doing something like that? 我将如何去做这样的事情?
Thanks 谢谢
I think this is what you require 我认为这就是你所需要的
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
checkbox2radio('.checkbox');
checkbox2radio('.hamlet');
function checkbox2radio(selector) {
$(selector).on('change', function(e) {
var checked = this.checked;
var index = $(selector).index(this);
if (checked) {
$(selector).each(function(i) {
if(i == index) {
}
else {
$(selector).eq(i).removeAttr('checked');
}
});
}
});
}
})
</script>
<input type="checkbox" class="checkbox"> Foo<br>
<input type="checkbox" class="checkbox"> Bar<br>
<input type="checkbox" class="checkbox"> Hello<br>
<input type="checkbox" class="checkbox"> World<br>
<hr>
<input type="checkbox" class="hamlet"> to<br>
<input type="checkbox" class="hamlet"> be<br>
<input type="checkbox" class="hamlet"> or<br>
<input type="checkbox" class="hamlet"> not<br>
<input type="checkbox" class="hamlet"> to<br>
<input type="checkbox" class="hamlet"> be<br>
You can change this 你可以改变这个
$('.checkbox').change(function() {
if($(this).is(":checked")) {
$value = $(this).attr("name");
document.controller.setValue('/@'+$value, this.checked ? '1' : '', 'checkbox');
}
});
to this 对此
$('.checkbox').change(function() {
$(".checkbox:checkbox:not(:checked)").each(function( index ) {
$value = $(this).attr("name");
document.controller.setValue('/@'+$value,'', 'checkbox');
});
if($(this).is(":checked")) {
$value = $(this).attr("name");
document.controller.setValue('/@'+$value, this.checked ? '1' : '', 'checkbox');
}
});
Before you setvalue for checked item, you will reset all unchecked ones. 在为选中的项目设置值之前,您将重置所有未选中的项目。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.