当我尝试使用输入标签更改 div 的颜色时遇到一些问题。如果 div 位于输入的同一部分,它就完美无缺。但是,如果我尝试将 div 放在页脚中,例如,停止工作。
HTML:
<section>
<input id="select1" name="test" type="radio" checked />
<label for="select1">Red</label>
<input id="select2" name="test" type="radio" />
<label for="select2">Green</label>
<input id="select3" name="test" type="radio" />
<label for="select3">Blue</label>
</section>
<footer>
<div class="colorDiv"></div>
</footer>
Run Code Online (Sandbox Code Playgroud)
CSS:
.colorDiv{
width:50px;
height:50px;
background-color:red;
}
#select2:checked ~ .colorDiv{
background-color:green;
}
#select3:checked ~ .colorDiv{
background-color:blue;
}
Run Code Online (Sandbox Code Playgroud)
这是一个例子:http : //jsfiddle.net/cqscc48g
有什么方法可以实现吗?
谢谢
在我的应用程序中,我想创建一个新的 Risk( Risk 对象的一个实例),当它被创建时,我想显示 5 个复选框和三个单选按钮。选定的选项特定于 Risk 对象的每个实例。
后来我想显示所有添加的风险的列表,每个风险上都有一个编辑选项按钮。我希望我的应用程序恢复特定于选定风险的视图(当单击选定风险上的“编辑”按钮时) - 风险名称、所有复选框和单选按钮均按先前选中的方式选中。我希望能够再次编辑这些复选框选择,以便所有新更改都正确反映在 MySQL 中。
作为 Thymeleaf 的新手,我做了以下事情:
<div th:each="top : ${topic}">
<input type="checkbox" th:field="*{topic}" th:checked="${top.checked}" th:value="${top.name}"/><label th:text="${top.name}">Something is wrong !</label>
</div>
Run Code Online (Sandbox Code Playgroud)
我确定 Controller 和 Hibernate/MySQL 部分工作正常(我使用 Logs 进行了检查)。
这工作得很好 - 但前提是我只选择了一个复选框(最初是在我添加风险时)。
如果我选择了多个复选框(添加风险时),然后选择此风险进行编辑,则不会选中任何复选框。
怎么了 ?
我有一个 jquery 函数,可以在选中或取消选中某些复选框时显示或隐藏 div,并且使用“更改”函数可以正常工作。因此,如果之前已选中该复选框,则不会显示相应的 div。我怎样才能更改此代码以使其工作?
我的代码在这里:
<script>
jQuery(document).ready(function($) {
$('.my_features').change(function() {
var checkbox = $(this);
if( checkbox.is(':checked') ) {
$( '#' + checkbox.attr('data-name') ).show();
} else {
$( '#' + checkbox.attr('data-name') ).hide();
}
});
});
</script>
Run Code Online (Sandbox Code Playgroud) 这是我的简单选择器
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_square_blue_border_unselected" android:state_checked="false" />
<item android:drawable="@drawable/ic_square_checkbox_selected" android:state_checked="true" />
<item android:drawable="@drawable/ic_square_blue_border_unselected" />
</selector>
Run Code Online (Sandbox Code Playgroud)
当我添加state_enabled : false/true 时,它说,
“此项目无法访问,因为前一个项目是更一般的匹配”
……我不明白为什么会这样?因为我还添加了一个新属性 -> state_enabled ...我想如果两个属性都匹配然后只选择相应的可绘制对象。
我想做类似的事情,
checked && not disabled -> blue color checked box,
not checked && not disabled -> blue border unchecked box,
checked && disabled -> gray color checked box,
not checked && disabled -> gray color unchecked box
Run Code Online (Sandbox Code Playgroud)
而且, checkbox.setEnabled(false) 不适用于这种情况。这是我的 xml 代码。
<CheckBox
android:id="@+id/checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="@drawable/selector_chkbox_blue_border"
android:textColor="@color/steel_grey"
android:paddingLeft="10dp"
android:text="Checkbox text"/> …Run Code Online (Sandbox Code Playgroud) 有谁知道为什么这不起作用.它将始终打印'未选中'.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function msg(x)
{
if($(x).attr('checked')){
alert('checked!!');
}
else{
alert('unchecked');
}
}
</script>
</head>
<body>
<form>
<input type="checkbox" id="fname2" onClick="msg(this.id)" /><br/>
</form>
</body>
</html>
Run Code Online (Sandbox Code Playgroud) 我刚刚发现了淘汰赛(3.0和3.1)和复选框的问题
问题是,复选框的更改事件绑定不会在不同的浏览器中一致地发生.
请参阅下面的代码
<table >
<tr>
<td >
<input type="checkbox" data-bind='checked: CheckVal, event: { change: refresh }' />
</td>
<td>Check Value in checked binding: <span data-bind="text: CheckVal"></span>
</td>
</tr>
<tr>
<td></td>
<td>Check Value in changed event binding: <span data-bind="text: CheckValChanged"></span>
</td>
</tr>
</table>
Run Code Online (Sandbox Code Playgroud)
和javascript
function MainViewModel() {
var self = this;
this.CheckVal = ko.observable(true);
this.CheckValChanged = ko.observable(true);
this.refresh = function() {
self.CheckValChanged(self.CheckVal());
}
}
viewModel = new MainViewModel();
ko.applyBindings(viewModel);
Run Code Online (Sandbox Code Playgroud)
在Firefox中,更改事件绑定发生在复选框值更改后,因此在更改事件处理程序中,我们可以读取复选框的实际值(即,如果选中复选框,则绑定字段的值为value = true).
在所有其他浏览器中(我使用Chrome,IE 11,Opera和Safari测试过),更改事件绑定似乎在实际更改绑定字段的值之前发生(即,选中复选框,在更改处理程序中读取的值)是false,如果未选中,则读取的值为true)
你可以在http://jsfiddle.net/bzamfir/su6SW/2/看到这个问题.
问题不仅在于浏览器中的行为不一致,而且对于大多数浏览器而言,这似乎是违反直觉的:事件是变化 …
我有很多表,当一个复选框被选中时 - 所有其他表应该清除.您可以在此表中检查任意数量的复选框,但只能一次检查一个表中的复选框.我该怎么做呢?我希望尽可能避免使用id,因为我有8个表.
$('input[type=checkbox]').on('click', function () {
});
Run Code Online (Sandbox Code Playgroud) 我有一个用户 ID 数组,如下所示:
var taskAssignTo = jQuery(this).attr('data-assigned');
var userArray = new Array();
userArray = taskAssignTo.split(",");
Run Code Online (Sandbox Code Playgroud)
这会获取存储在“数据分配”属性中的 id 字符串,这些 id 之间用逗号分隔。
我已尝试以下方法来检查每个复选框(如果它的值在数组中),如下所示:
jQuery( ".assignTo input" ).each(function( index ) {
var val = jQuery( this ).val();
if(jQuery.inArray(val, userArray)){
jQuery( this ).prop('checked', true);
}
});
Run Code Online (Sandbox Code Playgroud)
但是,这仅检查数组中的最后一项。
如果我喜欢console.log(val)这样:
jQuery( ".assignTo input" ).each(function( index ) {
var val = jQuery( this ).val();
console.log(val);
if(jQuery.inArray(val, userArray)){
jQuery( this ).prop('checked', true);
}
});
Run Code Online (Sandbox Code Playgroud)
我可以看到数组的所有结果都是从“数据分配”属性返回的。如果我将 console.log(val) 移至此处:
jQuery( ".assignTo input" ).each(function( index ) {
var val …Run Code Online (Sandbox Code Playgroud) checked ×8
checkbox ×5
jquery ×4
javascript ×2
android ×1
arrays ×1
binding ×1
css ×1
data-binding ×1
disable ×1
each ×1
knockout.js ×1
onchange ×1
radio-button ×1
selector ×1
spring ×1
this ×1
thymeleaf ×1