标签: checkbox

我有一个带有复选框和一些文本的列表(如电子邮件的收件箱).当我单击列表项(行)上的任意位置时,我想检查/取消选中该复选框.我在行的click事件上使用了以下代码:

$(this).find(".cbx input").attr('checked', true);

这是第一次显示选中的复选框.但是当我点击下一次选中它时,复选框的值="已检查"html代码中的更新(我通过firebug检查),但复选框未显示为已选中.

当我定义类似于这样的Django表单类时:

def class MyForm(forms.Form):
    check = forms.BooleanField(required=True, label="Check this")

它扩展为HTML,如下所示:

<form action="." id="form" method=POST>
<p><label for="check">Check this:</label> <input type="checkbox" name="check" id="check" /></p>
<p><input type=submit value="Submit"></p>
</form>

我希望复选框输入元素在复选框后面有一个标签,而不是相反.有没有办法说服Django这样做？

[编辑]

感谢Jonas的回答 - 仍然,虽然它解决了我问的问题(复选框标签呈现在复选框的右侧),但它引入了一个新问题(所有窗口小部件标签都呈现在他们的窗口小部件的右侧......)

我想避免重写_html_output(),因为它显然不是为它而设计的.我想出的设计是在Field类中实现字段html输出方法,覆盖Boolean字段的方法,并在_html_output()中使用该方法.遗憾的是,Django开发人员选择采用不同的方式,我希望尽可能在现有框架内工作.

CSS听起来像一个不错的方法,除了我不知道足够的CSS来解决这个问题,甚至不知道我是否喜欢这种方法.此外,我更喜欢仍然类似于最终输出的标记,至少在渲染顺序中.

此外,由于为任何特定标记设置多个样式表是合理的,因此在CSS中执行此操作可能意味着必须多次对多个样式执行此操作,这几乎使CSS成为错误的答案.

[编辑]

好像我正在回答下面的问题.如果有人有更好的想法如何做到这一点,不要害羞.

我正在使用jQuery Uniform来设置输入/选择等样式.但是,复选框已停止工作.我是appending从ajax调用发送的数据.一旦加载,我$.uniform.update("input:checkbox")用来更新新的HTML.尝试(取消)检查输入时,它只能工作一次.如果我想(再)检查它,它根本不会改变.

我已经尝试改变统一的Javascript,使所有的动作(即click,focus,blur等等)是下.live功能.(即.live("click",).这只会阻止任何工作.

更新:

我完全阅读了Uniform JS并发现了一个问题:

if(!$(elem).attr("checked")){
    //box was just unchecked, uncheck span
    spanTag.removeClass(options.checkedClass);
}else{
    //box was just checked, check span.
    spanTag.addClass(options.checkedClass);
}

该.attr("checked")语法失败.它总是会返回false.为什么？我不知道.除此之外,它不会更新原始文件input以删除checked属性或设置checked属性.

我浏览了官方网站,发现它没有更新复选框输入.所以这不仅仅是我的xP

我已经搜索了一下,发现了各种方法来检查是否选中了复选框但是以下方法失败:

if ($(elem).attr("checked")) // The original.
if ($(elem).attr("checked") == true)
if ($(elem).is(":checked"))
if ($(elem).checked)
// and:
var check = $(elem).match(/checked=/);
if (check == null)

非常感谢指导词〜:3

我有一个CheckBox我想要在自己的边界内居中,而不是被推到一边.可能比解释更容易证明:

请注意,它不居中.目前定义为:

<CheckBox
    android:id="@+id/checkbox_star"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:button="@drawable/btn_favorite"

    android:layout_gravity="center"
    android:minWidth="48dp" />

没关系自定义按钮drawable.它与香草的行为相同CheckBox(小复选框的行为相同).

您好朋友我想要做的就是更改复选框的背景颜色.我累了很多东西,但没有任何作用.有人可以帮忙吗？

    input[type="checkbox"] {
      background: #3d404e;
      border: #7f83a2 1px solid;
   }

我对React和复选框有一个非常烦人的问题.我正在使用的应用程序需要一个复选框列表,表示后端持久存在的设置.可以选择将设置恢复为原始状态.

起初,我创建了一个具有像设置图这样的对象的组件.每个设置都有一个键和一个布尔值.因此:

{
    bubbles: true,
    gregory: false
}

表示为:

<input type="checkbox" value="bubbles" checked="checked" />
<input type="checkbox" value="gregory" />

现在,似乎React对于复选框应该如何工作一无所知.我不想设置复选框的值,我想要"checked"属性.

但是,如果我尝试这样的事情:

<input
    type="checkbox"
    value={setting}
    checked={this.settings[setting]}
    onChange={this.onChangeAction.bind(this)}
/>

我收到这个警告:

警告:AwesomeComponent正在更改要控制的类型复选框的不受控制的输入.输入元素不应从不受控制切换到受控制(或反之亦然).决定在组件的使用寿命期间使用受控或不受控制的输入元素.更多信息:[ 一些无用的文档页面我多次阅读但无济于事 ]

所以我决定创建另一个组件来包装每个单独的复选框,我得到了这个:

<input
    type="checkbox"
    checked={this.state.checked}
    onChange={this.onChangeAction.bind(this)}
/>

现在这checked是一个直接出现在我所在州的财产.

这会产生相同的警告,所以我尝试使用defaultChecked:

<input
    type="checkbox"
    defaultChecked={this.state.checked}
    onChange={this.onChangeAction.bind(this)}
/>

这使警告消失,但现在无法将checked值重置为默认值.所以我试着玩这个方法componentWillReceiveProps,这样我很确定我的状态是正确的,this.state.checked是正确的,组件再次呈现.

确实如此.但复选框保持原样.现在我离开了那个丑陋的警告,我正在使用checked.我如何解决这个问题,以便警告消失？

我想也许有一种强制重新渲染组件的方法,因此它捕获新defaultChecked值并使用它.但我不知道该怎么做.也许仅针对此组件禁止警告？那可能吗？也许还有其他事情可以做？

我对listview有一个问题,哪个列表项包含一个复选框.当我选中一个框并滚动列表时,复选框有时会自动调用oncheckedchange并且复选框的值会更改!

或者,当我的列表超过9或10项时,当我在项目1检查时,项目8或9被检查???

任何人都可以告诉我,我该修复这个错误？

提前致谢!

list_item.xml

<ImageView
    android:layout_alignParentLeft="true"
    android:layout_width="36dip"
    android:layout_height="36dip"
    android:layout_centerVertical="true"
    android:scaleType="fitCenter"
    android:id="@+id/image_view"
    android:src="@drawable/icon" />

<TextView android:layout_toRightOf="@id/image_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="5dip"
    android:id="@+id/text_view"
    android:lines="1"
    android:textSize="20sp"
    android:textColor="@color/white" />

<TextView android:layout_toRightOf="@id/image_view"
    android:layout_below="@id/text_view"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="5dip"
    android:id="@+id/text_view2"
    android:textSize="14sp"
    android:lines="1"
    android:textColor="@color/white" />          

这是适配器视图:

    public View getView(int position, View convertView, ViewGroup parent) {
        Log.e(TAG, "getView");
        ViewHolder mViewHolder;
        if (convertView == null) {
            Log.e(TAG, "Inflater is inflating...");
            convertView = mInflater.inflate(R.layout.custom_list_app, null);
            mViewHolder = new ViewHolder();
            mViewHolder.checkbox = (CheckBox) convertView.findViewById(R.id.checkbox);
            mViewHolder.remove = convertView.findViewById(R.id.music_info);
            convertView.setTag(mViewHolder);
        } else {
            mViewHolder = (ViewHolder) …

我有一个循环,在同一页面创建20个复选框(它创建不同的形式).我希望通过chrome开发人员工具运行JavaScript,而无需使用任何同时检查所有复选框的库.

这是我得到的:

function() {
    var aa= document.getElementsByTagName("input");
    for (var i =0; i < aa.length; i++){
     aa.elements[i].checked = checked;
    }
}

PS:我已经搜索过并在Stack-Overflow中发现了很多问题,但没有一个对我有用,如果有人能找到正确的答案,我会很高兴的.

编辑(求助)对于答案,请转到问题的底部.

我有一个listview,并使用customadapter在其中填充一些行.被充气的行包含一个复选框.我可以保持复选框的状态,但问题是,我的列表项不再可点击.这是我的代码:

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    fl=(ListView)findViewById(R.id.MainMenu);//Mainmenu is listview
    fl.setAdapter(new CustomAdapter(Annotate.this,R.layout.preann2,_dir));//preann2 is row and _dir is the list of objects
    //fl.setOnItemClickListener(this); tried this too
}

public void onItemClick(AdapterView<?> a, View view, int pos, long id) 
{
      //Implementations
}

    public class CustomAdapter extends ArrayAdapter<String>
{
    public CustomAdapter(Context context, int textViewResourceId,String[] objects) {
        super(context, textViewResourceId,objects);
    }

    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
            LayoutInflater inflater=getLayoutInflater();
            View row=inflater.inflate(R.layout.preann2, parent, false);
            try
            {

            TextView Name=(TextView)row.findViewById(R.id.title);
            Name.setText("xyz"); …

我使用此代码进行复选框检查事件,但它不起作用.

CSS

<link href="assets/plugins/bootstrap-switch/static/stylesheets/bootstrap-switch-metro.css" rel="stylesheet" type="text/css" />

HTML

<div class="switch switch-mini" data-on-label="<i class='icon-sun icon-white'></i>" data-off-label="<i class='icon-sun muted'></i>">
    <input id="swWeather" type="checkbox" class="toggle" onclick="toggleWeather()" />
</div>

JS

<script src="assets/plugins/bootstrap-switch/static/js/bootstrap-switch.js" type="text/javascript"></script>

如果我使用这种方式,只是视觉样式工作良好,但它不会触发toggleWeather()功能,但如果我删除bootstrap-switch.js,所有视觉样式都被删除,看起来标准为标准复选框,虽然它工作得很好.

如何更改复选框选中状态使用bootstrap-switch单击它？

在这里我的toggleweather代码:

function toggleWeather() {

            if (document.getElementById('swWeather').checked)

            { weatherLayer.setMap(map); }

            else

            { weatherLayer.setMap(null); }

            if (document.getElementById('swCloud').checked)

            { cloudLayer.setMap(map); }

            else

            { cloudLayer.setMap(null); }
        }

顺便说一句,我使用这个主题的开关:http: //www.keenthemes.com/preview/metronic_admin/form_component.html#myModal

这不是一个很好的例子,但就像 http://jsfiddle.net/UHkN6/