我在表单中有一个复选框,我希望它按照以下方案工作:
如果有人检查它,textfield(totalCost)的值应该设置为10.然后,如果我返回并取消选中它,函数会根据表单中的其他参数calculate()设置值totalCost.
所以基本上,我需要的部分在哪里,当我选中复选框时我会做一件事,当我取消选中它时,我会做另一件事.
我已经对此做了一些搜索,并且我找到了几个部分答案,但是没有什么能让我感到温暖模糊"这是正确的方法".要回答针对此问题的最常见投诉:"复选框可以有两个合法状态 - 已选中和未选中",这是"我接受条款和条件..."复选框,必须选中该复选框才能完成注册,因此,从业务逻辑的角度来看,需要检查该框.
请提供完整的cut-n-paste ready代码片段与您的回复!我知道有几个部分 - CustomValidator(大概),代码隐藏,一些javascript和可能的IsValid检查,对我来说令人沮丧的部分是在我看过的每个例子中,其中一个是关键的件丢失了!
TLDR:使用defaultChecked而不是checked,在这里工作jsbin http://jsbin.com/mecimayawe/1/edit?js,output
尝试设置一个简单的复选框,在选中时会勾选其标签文本.出于某种原因,当我使用该组件时,handleChange不会被触发.谁能解释我做错了什么？
var CrossoutCheckbox = React.createClass({
getInitialState: function () {
return {
complete: (!!this.props.complete) || false
};
},
handleChange: function(){
console.log('handleChange', this.refs.complete.checked); // Never gets logged
this.setState({
complete: this.refs.complete.checked
});
},
render: function(){
var labelStyle={
'text-decoration': this.state.complete?'line-through':''
};
return (
<span>
<label style={labelStyle}>
<input
type="checkbox"
checked={this.state.complete}
ref="complete"
onChange={this.handleChange}
/>
{this.props.text}
</label>
</span>
);
}
});
用法:
React.renderComponent(CrossoutCheckbox({text: "Text Text", complete: false}), mountNode);
解:
使用checked不会让底层值发生变化(显然),因此不会调用onChange处理程序.切换到defaultChecked似乎解决了这个问题:
var CrossoutCheckbox = React.createClass({
getInitialState: function () {
return {
complete: (!!this.props.complete) || false
}; …我有一些代码
<input type="checkbox" id="chk" value="value" />
<label for="chk">Value </label>
<br/>
<input type="button" id="But1" value="set value" />
<br />
<input type="button" id="But2" value="read checked" />
JavaScript的:
$(document).ready(function () {
console.log("Ready ...");
registerHandlers();
function registerHandlers() {
$('#But1').click(function () {
$('#chk').prop('checked', !$('#chk').is(':checked'));
});
$('#But2').click(function () {
var chk1 = $('#chk').is(':checked');
console.log("Value : " + chk1);
});
$('input[type="checkbox"]').change(function () {
var name = $(this).val();
var check = $(this).prop('checked');
console.log("Change: " + name + " to " + check);
});
}
});
如何使用jQuery处理复选框的更改？我需要把处理程序更改为选中的任何复选框.
[更新]
有一个复选框和几个按钮.每个按钮都可以更改复选框.如何捕捉更改复选框的事件？ …
在大多数浏览器中呈现的标准复选框非常小,即使使用较大的字体也不会增加大小.什么是最好的,独立于浏览器的方式来显示更大的复选框？
setOnCheckedChangeListener(new OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
// How to check whether the checkbox/switch has been checked
// by user or it has been checked programatically ?
if (isNotSetByUser())
return;
handleSetbyUser();
}
});
如何实现方法isNotSetByUser()？
当我将一个函数绑定到一个复选框元素,如:
$("#myCheckbox").click( function() {
alert($(this).is(":checked"));
});
复选框在触发事件之前更改其已检查的属性,这是正常行为,并给出反向结果.
但是,当我这样做时:
$("#myCheckbox").click();
触发事件后,复选框会更改其检查属性.
我的问题是,有没有办法从jQuery触发click事件,就像普通点击一样(第一个场景)？
PS:我已经尝试过trigger('click');
有谁知道为什么asp:CheckBox的客户端javascript处理程序需要是OnClick =""属性而不是OnClientClick =""属性,对于asp:Button？
例如,这有效:
<asp:CheckBox runat="server" OnClick="alert(this.checked);" />
这不(没有错误):
<asp:CheckBox runat="server" OnClientClick="alert(this.checked);" />
但这有效:
<asp:Button runat="server" OnClientClick="alert('Hi');" />
这不会(编译时错误):
<asp:Button runat="server" OnClick="alert('hi');" />
(我知道Button.OnClick用于什么;我想知道为什么CheckBox不能以相同的方式工作......)
点击复选框,并要求NG-点击:不更新模型,所以该复选框值在UI呈现错误之前NG-点击踢:
这适用于AngularJS 1.0.7,并且似乎在Angualar 1.2-RCx中被破坏了.
<div ng-app="myApp" ng-controller="Ctrl">
<li ng-repeat="todo in todos">
<input type='checkbox' ng-click='onCompleteTodo(todo)' ng-model="todo.done">
{{todo.text}}
</li>
<hr>
task: {{todoText}}
<hr><h2>Wrong value</h2>
done: {{doneAfterClick}}
和控制器:
angular.module('myApp', [])
.controller('Ctrl', ['$scope', function($scope) {
$scope.todos=[
{'text': "get milk",
'done': true
},
{'text': "get milk2",
'done': false
}
];
$scope.onCompleteTodo = function(todo) {
console.log("onCompleteTodo -done: " + todo.done + " : " + todo.text);
$scope.doneAfterClick=todo.done;
$scope.todoText = todo.text;
};
}]);
破碎的小提琴w/Angular 1.2 RCx - http://jsfiddle.net/supercobra/ekD3r/
使用Angular 1.0.0的工作小提琴 - http://jsfiddle.net/supercobra/8FQNw/