精华内容
下载资源
问答
  • vue table checkbox 单选问题
    千次阅读
    2022-03-25 18:07:36

    <el-table

    :data="tableData"

    border

    class="table"

    @select="select"

    >

    @select 是 CheckBox 选中事件

    select(val,row){

    }

    val 为表格中选中的checkbox 列表,row 为当前行

    更多相关内容
  • 在GridView控件中,第0列有放一个CheckBox控件,现想实现对CheckBox进行单选,怎么实现呢?下面小编通过本文给大家分享Asp.net 中使用GridView控件实现Checkbox单选功能,一起看看吧
  • Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at ... Unless required by ...
  • Android checkbox单选

    千次阅读 2021-12-20 16:43:43
    参考了很多大神写法,整理了一些,弄个小demo,直接上代码了 代码使用依赖 dependencies { // Kotlin implementation "androidx.activity:activity-ktx:1.4.0" ... implementation 'androidx.core:core-ktx:...

    参考了很多大神写法,整理了一些,弄个小demo,效果如下,直接上代码了

    代码使用依赖

    dependencies {
    
        // Kotlin
        implementation "androidx.activity:activity-ktx:1.4.0"
        //**********
        implementation 'androidx.core:core-ktx:1.3.2'
        implementation 'androidx.appcompat:appcompat:1.2.0'
        implementation 'com.google.android.material:material:1.3.0'
        implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
        testImplementation 'junit:junit:4.+'
        androidTestImplementation 'androidx.test.ext:junit:1.1.2'
        androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'
    
    }

    build.gradle中加入dataBinding依赖

      dataBinding {
            enabled = true
        }

    展示数据的模型

    data class ListData(
        var id: Int,
        val name: String,
        var isSelect: Boolean = false
    )

    布局文件

    <?xml version="1.0" encoding="utf-8"?>
    <layout xmlns:android="http://schemas.android.com/apk/res/android">
    
        <data>
    
        </data>
    
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
    
            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/recycler_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
    
        </RelativeLayout>
    </layout>

    数据item的布局

    <?xml version="1.0" encoding="utf-8"?>
    <layout xmlns:android="http://schemas.android.com/apk/res/android">
    
        <data>
    
        </data>
    
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="60dp">
    
            <ImageView
                android:id="@+id/imageView"
                android:layout_width="60dp"
                android:layout_height="40dp"
                android:layout_centerVertical="true"
                android:layout_marginStart="20dp"
                android:scaleType="fitXY"
                android:src="@mipmap/ic_launcher" />
    
            <TextView
                android:id="@+id/tv_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginStart="120dp"
                android:text="微信支付"
                android:textSize="20sp" />
    
            <CheckBox
                android:id="@+id/iv_state"
                android:layout_width="26dp"
                android:layout_height="26dp"
                android:background="@drawable/bg_checkbox_selector"
                android:button="@null"
                android:layout_alignParentEnd="true"
                android:layout_centerVertical="true"
                android:layout_marginEnd="20dp" />
    
        </RelativeLayout>
    
    
    </layout>
    
    

    drawable下的selector选择状态,图片可以选择自己需要的

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item android:drawable="@mipmap/icon_checkbox_selected" android:state_checked="true"/>
        <item android:drawable="@mipmap/icon_checkbox_unselected"/>
    <!--    <item android:drawable="@mipmap/icon_checkbox_unselected" android:state_checked="false"/>-->
    </selector>

    Activity的代码

    import android.os.Bundle
    import androidx.appcompat.app.AppCompatActivity
    import androidx.databinding.DataBindingUtil
    import androidx.recyclerview.widget.LinearLayoutManager
    import com.example.gzrcodestore.R
    import com.example.gzrcodestore.adapter.SingleAdapter
    import com.example.gzrcodestore.data.ListData
    import com.example.gzrcodestore.databinding.ActivityMultipleBinding
    
    class SingleActivity : AppCompatActivity() {
    
        lateinit var mBinding: ActivityMultipleBinding
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
    
            mBinding = DataBindingUtil.setContentView(this , .layout.activity_multiple)
            val list = listOf(
                ListData(0 ,"微信支付" , false) ,
                ListData(0 ,"支付宝支付" , false),
                ListData(0,"银行卡支付" , false)
            )
            val mAdapter = SingleAdapter(list)
    
            mBinding.recyclerView.layoutManager = LinearLayoutManager(this , LinearLayoutManager.VERTICAL , false)
            mBinding.recyclerView.adapter = mAdapter
        }
    
    }

    接下来是最重要的适配器内容的实现 ,我们使用一个变量isSelectPosition作为标识,来存储被选择内容的position即可,具体实现如下:

    class SingleAdapter(
        private val list: List<ListData>
    ) : SingleLayoutAdapter(R.layout.item_multiple) {
    
        var isSelectPosition = -1
    
        override fun onBindViewHolder(holder: BaseViewHolder, position: Int) {
            super.onBindViewHolder(holder, position)
            val binding = holder.getmBinding() as ItemMultipleBinding
            val bean = list[position]
            bean.id = position
            binding.tvName.text = bean.name
            binding.ivState.isChecked = bean.isSelect
            binding.ivState.setOnClickListener {
                isSelectPosition = position
                list.forEach { item ->
                    item.isSelect = item.id == isSelectPosition
                }
                notifyDataSetChanged()
                list.forEach { data ->
                    Log.v("gzr" , "列表内容打印------>$data")
                }
            }
        }
    
        override fun getObjForPosition(position: Int): Any {
            return list[position]
        }
    
        override fun getItemCount(): Int {
            return list.size
        }
    }
    SingleLayoutAdapter代码
    
    abstract class SingleLayoutAdapter(private val layoutId: Int) :
        BaseAdapter() {
        override fun getLayoutIdForPosition(position: Int): Int {
            return layoutId
        }
    }

    BaseViewHodler代码

    import androidx.databinding.ViewDataBinding;
    import androidx.recyclerview.widget.RecyclerView;
    
    public class BaseViewHolder extends RecyclerView.ViewHolder {
    
        private final ViewDataBinding mBinding;
    
        public ViewDataBinding getmBinding() {
            return mBinding;
        }
    
        public BaseViewHolder(ViewDataBinding binding) {
            super(binding.getRoot());
            this.mBinding = binding;
        }
    
        public void bind(Object obj) {
    //        mBinding.setVariable(BR.item_data , obj);
            mBinding.executePendingBindings();
        }
    
    }

    BaseAdapter代码

    abstract class BaseAdapter : RecyclerView.Adapter<BaseViewHolder>() {
    
        override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): BaseViewHolder {
            val layoutInflater = LayoutInflater.from(parent.context)
            val binding = DataBindingUtil.inflate<ViewDataBinding>(layoutInflater, viewType, parent, false)
            return BaseViewHolder(binding)
        }
    
        override fun onBindViewHolder(holder: BaseViewHolder, position: Int) {
            val obj = getObjForPosition(position)
            holder.bind(obj)
        }
    
        override fun getItemViewType(position: Int): Int {
            return getLayoutIdForPosition(position)
        }
    
        protected abstract fun getObjForPosition(position: Int): Any
        protected abstract fun getLayoutIdForPosition(position: Int): Int
    }

    如果对你有一点帮助,请给个赞呗

    展开全文
  • checkbox单选复选按钮美化代码是一款基于CSS3实现的checkbox美化单选按钮和复选按钮美化样式。
  • WPF中DataGrid里面的Checkbox实现单选关键代码, 文档里面的代码复制粘贴即可实现!本人也是项目需要写的一个功能11行代码实现此功能! 希望可以帮助到你们!
  • 一组CheckBox单选效果

    2021-08-20 13:38:02
    一组checkbox,设置为checkbox单选效果

    需求: 虽然是checkbox,但是想让checkbox为单选效果

    <td id="tekurisuBangoCheckBox">
        <input id="jheKeiyakukbn" th:checked="*{jheKeiyakukbn} eq '1'" type='checkbox' style="vertical-align: middle;" />
        <label for="jheKeiyakukbn">契约</label>
        <input id="jheHenkokbn" th:checked="*{jheHenkokbn} eq '1'" type='checkbox' style="vertical-align: middle;" />
        <label for="jheHenkokbn">变更</label>
        <input id="jheKanryokbn" th:checked="*{jheKanryokbn} eq '1'" type='checkbox' style="vertical-align: middle;" />
        <label for="jheKanryokbn">完成</label>
    </td>
    
    /*
        思路:
            1.在所有的checkbox的最外层,放置一个标签进行包裹
            给最外层的的包裹的标签添加click事件
            当我们点击checkbox的时候,点击事件会冒泡到最外层的包裹标签上,从而触发点击事件
            2.当点击事件触发之后,遍历所有的checkbox,全部设置为不选中
            仅仅将当前点击的对象设置为选中状态
    */
    $("#tekurisuBangoCheckBox").on("click", function(obj) {
        $("#tekurisuBangoCheckBox").find(":checkbox").each(function(index, chekboxItem) {
        	// 所有的checkbox为非选中状态
            $(chekboxItem).prop('checked', false);
        });
        // 当前点击的checkbox为选中状态
        $(obj.target).prop('checked', true);
    });
    
    展开全文
  • 因为element-ui上面的带checkbox的表格,是多选。如下操作,能把多选变成单选。最终结果如下图: 代码如下: <el-table ref="multipleTable" :data="dialogTables" @select-all="dialogCheck" @select=...

    因为element-ui上面的带checkbox的表格,是多选。如下操作,能把多选变成单选。最终结果如下图:在这里插入图片描述
    代码如下:

       <el-table ref="multipleTable" :data="dialogTables" @select-all="dialogCheck" @select="dialogCheck" @selection-change="dialogCheckChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column property="ANAME" label="模块名称"></el-table-column>
      </el-table>
    
    

    :事先声明变量:selectioned(存放所选择的数组)

    /**
       *    单选操作,全选按钮失效操作
       */
    dialogCheck: function(selection, row) {
      this.$refs.multipleTable.clearSelection()
      if (selection.length === 0) { // 判断selection是否有值存在
        return
      }
      if (row) {
        this.selectioned = row
        this.$refs.multipleTable.toggleRowSelection(row, true)
      }
    },
    
      /**
       *  取消单选的checkbox
       */
    dialogCheckChange(row) {
      if (row.length === 0) {
        this.selectioned = null
      }
    }
    
    
    展开全文
  • checkbox单选功能

    2013-05-05 00:41:08
    该代码在ASP.NET环境下实现了多个checkbox的同时存在实现单选的功能。
  • js实现CheckBox单选多选全选功能 在checkbox的使用中,我们经常遇到需要全选或者单选的情况,通过js定义函数可以方便实现需求,提高用户体验感。 定义多个CheckBox <div> <input type="checkbox" id="all...
  • vue+element 实现checkbox单选

    千次阅读 2020-06-15 18:41:57
    vue+element 实现checkbox单选 1、标签 <el-table @selection-change="handleSelectionChangeScript" ref="scriptDetailData" :data="scriptDetailData" lazy v-loading="scriptLoading" @select-all=...
  • 【vue+element-ui】前端实现表格checkbox单选 需求:每次只能选中一条数据进行操作,如果同时选中多条,需弹出提示:请选择一条数据 那我就直接让它只能选中一条,不允许多选,上代码: --------分割线--------- el-...
  • css3制作checkbox单选按钮美化代码是一款勾选按钮美化,单选按钮美化效果代码。
  • checkbox单选复选按钮美化代码是一款基于CSS3实现的checkbox美化单选按钮和复选按钮美化样式。
  • 效果描述: 基于jQuery的一款插件,可以让你的input输入框 无论是单选还是多选,都实现的很漂亮 使用方法: 1、将CSS样式拷贝过去 2、将index.html中的代码部分拷贝过去即可 (注意保持文件路径正确)
  • bootstraptable设置checkbox单选

    万次阅读 2019-08-15 11:42:08
    bootstraptable设置checkbox单选 bootstrap-table.js源码里面可配置,搜索singleSelect参数设置为true即可 function initTable(){ $("#table").bootstrapTable('destroy').bootstrapTable({ url:"",/后台请求...
  • angularjs操作CheckBox单选、多选、全选、反选 **应用场景:**分页查询出列表
  • checkbox是多选,怎么才能让他变成单选,效果跟radio一样呢,本菜鸟就自己写了个小程序,代码很简单
  • checkbox单选复选按钮美化代码 checkbox单选复选按钮美化代码 checkbox单选复选按钮美化代码 checkbox单选复选按钮美化代码 checkbox单选复选按钮美化代码 checkbox单选复选按钮美化代码
  • Android checkbox 实现单选,代码较少,布局简单
  • JS设置checkbox单选

    2020-03-24 15:41:00
    searchForm.find('input[type="checkbox"]').click(function (evt) { if(evt.target.checked === true){ searchForm.find('input[type="checkbox"]').each...
  • www.jb51.net CheckBox单选</title> [removed] function sel1(obj){ if(obj.checked){ //如果当前项被选中了 document.all.chk2.checked=false //则不能选择第二组 document.all.sel1.selectedIndex=4
  • 一、jq实现单选框 (1)代码 <body> <input type="checkbox" name="aaa" class="checkbox1" id="a1" value="" /><label for="a1">苹果</label> <input type="checkbox" name="aaa" class...
  • checkbox单选多选

    2019-04-04 10:01:51
    checkbox类型单选多选都包含,使用方便快捷,有效
  • css3制作checkbox单选按钮美化代码是一款勾选按钮美化,单选按钮美化效果代码。
  • vue table checkbox单选控制

    千次阅读 2019-11-07 10:07:21
    <input type="checkbox" class="checkboxitem" @click.stop="selectCheckedInput($event,item)"> <td class="text-align-left">{{item.content}} <td>{{item.createUserName}} <td>{{item.channelName}} <td>{{...
  • 效果描述: 基于jQuery的一款插件,可以让你的input输入框 无论是单选还是多选,都实现的很漂亮 使用方法: 1、将CSS样式拷贝过去 2、将index.html中的代码部分拷贝过去即可 (注意保持文件路径正确)

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 76,513
精华内容 30,605
关键字:

checkbox单选