精华内容
下载资源
问答
  • jQuery判断checkbox选中状态

    千次阅读 2020-12-19 02:48:44
    前言神奇的JQuery怎么设置checkbox状态时好时坏?明明同一行代码,断点跟踪确实执行了,但是有时候好使,有时候却没有生效。毕竟对JS不是很熟悉,只是通过JS来处理前端HTML的标签的状态设置时,通过JQuery有时候会更...

    前言

    神奇的JQuery怎么设置checkbox状态时好时坏?明明同一行代码,断点跟踪确实执行了,但是有时候好使,有时候却没有生效。毕竟对JS不是很熟悉,只是通过JS来处理前端HTML的标签的状态设置时,通过JQuery有时候会更方便些的,但是发现更不好办。

    今天尝试实现checkbox全选、全不选功能,与App开发中的效果是一样的,勾选全选则将所有的选项都选中;同样取消勾选某个子项也将全选设置为非选中状态;所有子选项都为选中状态时,将全选设置为选中状态。

    由于对JS不是很熟悉,于是尝试各种百度、google,发现出来的文章都是坑爹啊。各种JQuery的,但是为什么我设置了就是没有作用的。起初以为是变量获取不到,于是断点跟踪,对象是取到了的,但是设置JQuery的方法来设置就是没有作用。

    搜到的处理方式

    这里的checkbox的id为cbxSelectAll,于是尝试这么写:

    $('#cbxSelectAll').attr('checked', true);

    结果是无效的。再尝试修改为:

    $('#cbxSelectAll').attr('checked', 'checked');

    结果是第一次设置生效了,再设置就没有生效。坑爹,这到底是什么东西,怎么时好时坏呢?

    然后在设置为false时,这么写:

    $('#cbxSelectAll').attr('checked', false);

    // 也没有作用

    //$('#cbxSelectAll').attr('checked', '');

    果然是都没有作用。但是通过下面的设置,可以取消选中:

    $('#cbxSelectAll').removeAttr('checked');

    难道是年代久远,这些方法已经不再有效了吗?

    最后解决办法

    最后的解决办法还是放弃了JQuery,改用Javascript原生的Dom来设置。

    下面是设置为全选或者取消全选状态的代码:

    varcheckboxes = document.getElementsByName('selectIds');

    varselectedCount = 0;

    varunSelectCount = 0;

    for (var i = 0; i < checkboxes.length; i++) {

    varcheckbox = checkboxes[i];

    if(checkbox.tagName == "INPUT" && checkbox.checked){

    selectedCount++;

    } else if (checkbox.tagName == "INPUT" && checkbox.checked == false) {

    unSelectCount++;

    }

    }

    if (selectedCount == checkboxes.length) {

    document.getElementById('cbxSelectAll').checked = true;

    } else if (unSelectCount != checkboxes.length) {

    document.getElementById('cbxSelectAll').checked = false;

    }

    JQuery获取状态

    JQuery通过checkbox的is函数来获取状态:

    varisChecked = $('#cbxSelectAll').is(':checked');

    之前尝试过使用attr函数来获取,但是获取的值显示为null:

    // 显示为null,好生奇怪

    varisChecked = $('#cbxSelectAll').attr('checked');

    当然,我们也可以直接使用Javascript原生的Dom方式来获取,肯定是没有问题的:

    varisChecked = document.getElementById('cbxSelectAll').checked;

    小结

    玩前端JQuery果然要比玩原生的JavaScript要吃力些,虽然有很多时候可以使代码更方便书写。不过还是两者结合来做吧。

    展开全文
  • 获取checkbox的值

    2021-02-26 13:25:41
    -- -->< /mce:style>< style mce_bogus="1">  /style> < title>JS获取复选框被选中的值< /title>  /head>  body>  input type="checkbox" name="test" value="0" / >0  input type="checkbox" name="test" ...

    <  !DOCTYPE html PUBLIC "-//W3C//DTD HTML

    4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    <  html>

    <  head>

    <  mce:style><

    !--

    -->< /mce:style>< style mce_bogus="1">

    <  /style>

    <

    title>JS获取复选框被选中的值< /title>

    <  /head>

    <  body>

    <  input type="checkbox"

    name="test" value="0" / >0

    <  input type="checkbox"

    name="test" value="1" / >1

    <  input type="checkbox"

    name="test" value="2" / >2

    <  input type="checkbox"

    name="test" value="3" / >3

    <  input type="checkbox"

    name="test" value="4" / >4

    <  input type="checkbox"

    name="test" value="5" / >5

    <  input type="checkbox"

    name="test" value="6" / >6

    < input type="checkbox" name="test"

    value="7" / >7

    < input type="button" οnclick="chk()"

    value="提  交" / >

    < /body>

    < /html

    < !DOCTYPE html PUBLIC "-//W3C//DTD HTML

    4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    < html>

    < head>

    < mce:style>< !--

    -->< /mce:style>< style mce_bogus="1">

    < /style>

    < title>JS获取复选框被选中的值< /title>

    < /head>

    < body>

    < input type="checkbox" name="test"

    value="0" / >0

    < input type="checkbox" name="test"

    value="1" / >1

    < input type="checkbox" name="test"

    value="2" / >2

    < input type="checkbox" name="test"

    value="3" / >3

    < input type="checkbox" name="test"

    value="4" / >4

    < input type="checkbox" name="test"

    value="5" / >5

    < input type="checkbox" name="test"

    value="6" / >6

    < input type="checkbox" name="test"

    value="7" / >7

    < input type="button" οnclick="chk()"

    value="提  交" / >

    < /body>

    < /html

    JS代码

    [javascript] view plaincopyprint?

    < mce:script src="jquery.js" mce_src="jquery.js"><

    /mce:script>< !--这是载入jquery.js文件,如果不使用jquery可以去掉-->

    < mce:script type="text/javascript">< !--

    function chk(){

    var obj=document.getElementsByName('test');

    //选择所有name="'test'"的对象,返回数组

    //取到对象数组后,我们来循环检测它是不是被选中

    var s='';

    for(var i=0; i< obj.length; i++){

    if(obj[i].checked)

    s+=obj[i].value+',';  //如果选中,将value添加到变量s中

    }

    //那么现在来检测s的值就知道选中的复选框的值了

    alert(s==''?'你还没有选择任何内容!':s);

    }

    function jqchk(){  //jquery获取复选框值

    var chk_value =[];

    $('input[name="test"]:checked').each(function(){

    chk_value.push($(this).val());

    });

    alert(chk_value.length==0

    ?'你还没有选择任何内容!':chk_value);

    }

    // -->< /mce:script>

    < mce:script src="jquery.js" mce_src="jquery.js"><

    /mce:script>< !--这是载入jquery.js文件,如果不使用jquery可以去掉-->

    < mce:script type="text/javascript">< !--

    function chk(){

    var obj=document.getElementsByName('test');

    //选择所有name="'test'"的对象,返回数组

    //取到对象数组后,我们来循环检测它是不是被选中

    var s='';

    for(var i=0; i< obj.length; i++){

    if(obj[i].checked)

    s+=obj[i].value+',';  //如果选中,将value添加到变量s中

    }

    //那么现在来检测s的值就知道选中的复选框的值了

    alert(s==''?'你还没有选择任何内容!':s);

    }

    function jqchk(){  //jquery获取复选框值

    var chk_value =[];

    $('input[name="test"]:checked').each(function(){

    chk_value.push($(this).val());

    });

    alert(chk_value.length==0

    ?'你还没有选择任何内容!':chk_value);

    }

    // -->< /mce:script>

    对checkbox的其他几个操作

    1. 全选

    2. 取消全选

    3. 选中所有奇数

    4. 反选

    5. 获得选中的所有值

    js代码

    [javascript] view plaincopyprint?

    $("document").ready(function(){

    $("#btn1").click(function(){

    $("[name='checkbox']").attr("checked",'true');//全选

    })

    $("#btn2").click(function(){

    $("[name='checkbox']").removeAttr("checked");//取消全选

    })

    $("#btn3").click(function(){

    $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数

    })

    $("#btn4").click(function(){

    $("[name='checkbox']").each(function(){//反选

    if($(this).attr("checked")){

    $(this).removeAttr("checked");

    }

    else{

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

    }

    })

    })

    $("#btn5").click(function(){//输出选中的值

    var str="";

    $("[name='checkbox'][checked]").each(function(){

    str+=$(this).val()+"/r/n";

    //alert($(this).val());

    })

    alert(str);

    })

    })

    $("document").ready(function(){

    $("#btn1").click(function(){

    $("[name='checkbox']").attr("checked",'true');//全选

    })

    $("#btn2").click(function(){

    $("[name='checkbox']").removeAttr("checked");//取消全选

    })

    $("#btn3").click(function(){

    $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数

    })

    $("#btn4").click(function(){

    $("[name='checkbox']").each(function(){//反选

    if($(this).attr("checked")){

    $(this).removeAttr("checked");

    }

    else{

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

    }

    })

    })

    $("#btn5").click(function(){//输出选中的值

    var str="";

    $("[name='checkbox'][checked]").each(function(){

    str+=$(this).val()+"/r/n";

    //alert($(this).val());

    })

    alert(str);

    })

    })

    html代码:

    [xhtml] view plaincopyprint?

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

    Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    < html xmlns="http://www.w3.org/1999/xhtml">

    < head>

    < meta http-equiv="Content-Type" content="text/html;

    charset=utf-8" / >

    < title>louis-blog >> jQuery 对checkbox的操作<

    /title>

    < mce:script type='text/javascript'

    src="http://leotheme.cn/wp-includes/js/jquery/jquery.js"

    mce_src="http://leotheme.cn/wp-includes/js/jquery/jquery.js"><

    /mce:script>

    < SCRIPT LANGUAGE="JavaScript">

    < !--

    $("document").ready(function(){

    $("#btn1").click(function(){

    $("[name='checkbox']").attr("checked",'true');//全选

    })

    $("#btn2").click(function(){

    $("[name='checkbox']").removeAttr("checked");//取消全选

    })

    $("#btn3").click(function(){

    $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数

    })

    $("#btn4").click(function(){

    $("[name='checkbox']").each(function(){//反选

    if($(this).attr("checked")){

    $(this).removeAttr("checked");

    }

    else{

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

    }

    })

    })

    $("#btn5").click(function(){//输出选中的值

    var str="";

    $("[name='checkbox'][checked]").each(function(){

    str+=$(this).val()+"/r/n";

    //alert($(this).val());

    })

    alert(str);

    })

    })

    -->

    < /SCRIPT>

    < /HEAD>

    < body style="text-align:center;margin: 0 auto;font-size:

    12px;" mce_style="text-align:center;margin: 0 auto;font-size:

    12px;">

    < div style="border: 1px solid #999; width: 500px; padding:

    15px; background: #eee; margin-top: 150px;">

    < form name="form1" method="post" action="">

    < input type="button" id="btn1" value="全选">

    < input type="button" id="btn2" value="取消全选">

    < input type="button" id="btn3" value="选中所有奇数">

    < input type="button" id="btn4" value="反选">

    < input type="button" id="btn5" value="获得选中的所有值">

    < br / >< br / >

    < input type="checkbox" name="checkbox"

    value="checkbox1">

    checkbox1

    < input type="checkbox" name="checkbox"

    value="checkbox2">

    checkbox2

    < input type="checkbox" name="checkbox"

    value="checkbox3">

    checkbox3

    < input type="checkbox" name="checkbox"

    value="checkbox4">

    checkbox4

    < input type="checkbox" name="checkbox"

    value="checkbox5">

    checkbox5

    < input type="checkbox" name="checkbox"

    value="checkbox6">

    checkbox6

    < /form>

    < /div>

    < /body>

    < /HTML>

    展开全文
  • JS获取全部checkbox选中的值 <input type=“checkbox” name=“recname” value="<?php echo $row2["xh"];?>" ><?php echo $row2["xm"];?> 方法一: var strgetSelectValue=""; var ...

    JS获取全部checkbox选中的值

    方法一:
    var strgetSelectValue="";
    var getSelectValueMenbers = $(“input[name=‘recname’]:checked”).each(function(j) {
    if (j >= 0) {
    strgetSelectValue += $(this).val() + “,”;
    }
    });
    alert(strgetSelectValue);

    方法二:
    $("#queren").click(function(){
    var selval="";
    var all = document.getElementsByName(‘recname’);
    for(var i = 1; i < all.length; i++){
    if(all[i].checked){selval = selval + “,” + all[i].value;}
    }
    alert(selval);
    });

    展开全文
  • checkbox-group @change="radioChange()"> <checkbox class="checking" value="psw" :checked="amount" @tap="isDefault =!isDefault" color="#0081FF" /> <text class="default">设为默认<...
    <template>
    	<view>
    		<checkbox-group @change="radioChange()">
    			<checkbox class="checking" value="psw" :checked="amount" @tap="isDefault =!isDefault" color="#0081FF" />
    			<text class="default">设为默认</text>
    		</checkbox-group>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				amount: true
    			};
    		},
    		methods: {
    			radioChange() {
    				if (this.isDefault) { 
    					console.log("已勾中选择框")
    				} else {
    					console.log("未选择")
    
    				}
    			},
    		},
    	}
    </script>
    
    展开全文
  • ~~~--------------------html部分---------------------------------12345678jsjquery--------------------js部分------------------------------//原生获取function fun(){obj = document.getElementsByName("ids")...
  • <span style="margin-left: 20px"> <...input type="checkbox" id="box" value="0"> </span> js获取选中状态 <script> var box = false; var box_code = -1; var.
  • bootstrapTable 获取选中CheckBox的行所有数据 var a= $("#表格id").bootstrapTable('getSelections'); a就是当前复选框选中的的对象
  • checkbox选择

    2021-03-16 19:37:55
    js获取单选框、复选框的值及操作 前天 昨天 今天 明天 后天 提交 前年 去年 今年 明年 后年 提交 全选 反选 全不选 posted on 2013-02-20 12:57 杨军威 阅读(347) 评论(0) 编辑 收藏
  • 获取layui表单复选框已选中的数据HTMLlayui.form.checkbox 获取选中 复选框开关关开关开立即提交JSlayui.use('form', function(){var form = layui.form,$ = layui.$;//各种基于事件的操作。form.on('submit(*)', ...
  • 1、var old = $("#old").val();if (old != null && old != 'undefined' && old != '') {var Gbox=$("input:checked... //获取id以 old的值开头并且被选中的checkbox对象for(var i=0;iif (Gbox[i]) ...
  • 本文主要内容是,如何去获取checkbox旁边的文本值,因为有这个需求去获取文本值做提示,本人对此不是很熟悉,所以花费了不少时间,特此在这里做个记录。 情况说明,上代码 <li><input type="checkbox" id=...
  • 简短的答案:使用该click事件,直到值更新后才会触发,并在您希望它触发时触发:Checkboxfunction handleClick(cb) {display("Clicked, new value = " + cb.checked);}更长的答案:该change事件处理函数不是调用,...
  • input type="checkbox" id="666" value="r1" name="check">r1</input> </div> $.each($('.class1 input:radio:checked'),function(){ var value = $(this).val() //使用val 属性获取值 var ID = $...
  • var row_checkbox=$(".row_checkbox"); var ids=""; if(row_checkbox.length>0){ var data=[]; for(var i=0;i<row_checkbox.length;i++){ if(row_checkbox[i].checked){ data.push(row_checkbox[i].value); } } if...
  • element checkbox 获取当前值

    千次阅读 2020-12-21 18:08:55
    checkRow(checked,{personId:item.personId,name:item.name})">{{[item.name](http://item.name)}}通过@...方法名(checked,你想传的额外参数...)"checkRow(checked, row) {console.log(`checked:${checked}`)...
  • input class="factor_checkbox" type="checkbox" name="{{item.value}}" ng-click="vm.changeCheckbox()">{{ item.name}} </div> JS代码: $scope.checkboxs = [{ value: "1", name: "氨氮" }, { value:...
  • antd checkbox const handleDownChange=(checkedValues)=>{ console.log(checkedValues) if(checkedValues.length){ setLineType(pre=> true ) }else{ setLineType(pre=>false) } } <...
  • } }, } checkbox 多选框 html {{item.text}} js export default { name:'checkbox', data(){ return { checkedValue:[],//一定必须是数组不能是字符串 answer:[], } }, watch:{ checkedValue:function(new_v,old_v)...
  • 1,radio分组只要name一样,就是一组的,即一组中只能选择一个,如下:代码如下:group1:radio1radio2radio3group2:radio4radio5radio6效果如下:2,获取选中的radio节点使用jquery可以很方便做到,先选择group,然后...
  • 前端js获取checkbox的值

    2020-12-19 23:22:21
    1、var old = $("#old").val();if (old != null && old != 'undefined' && old != '') {var Gbox=$("input:checked... //获取id以 old的值开头并且被选中的checkbox对象for(var i=0;iif (Gbox[i]) ...
  • 我正在使用JSP,JQUERY,AJAX,MYSQL和Servlet开发Web应用程序项目。我有table.jsp如下:Username : Bring Details您在文本框中输入一个名称,然后点击链接'带来详细信息'以在数据库中搜索(MYSQL)类似名称并将其返回...
  • phpcheckbox如何实现多选首先我们先来了解一下checkbox如何实现多选,要实现checkbox多选,只需要将每个checkbox的name属性设置为相同的值,注意,这个值必须带上“[]”,如:food[], 请看下面实例:...
  • 1.获取表格缓存,并循环赋值 //获取选中的数据组合成字符串
 var jgjcTableCache = table.cache.jgjc; 
function getCheckTable(jgjcTableCache){
 var addtagsv='';
 $.each(jgjcTableCache,function ...
  • layui如何获取checkbox复选框的值

    千次阅读 2021-01-17 16:44:59
    layui如何获取checkbox复选框的值发布时间:2020-10-21 17:07:09来源:亿速云阅读:164作者:Leah本篇文章给大家分享的是有关layui如何获取checkbox复选框的值,小编觉得挺实用的,因此分享给大家学习,希望大家阅读...
  • jquery获取checkbox选中的值,包括全选 取消全选 反选 选中奇数行 获取选中的值 这里有一个注意点:使用attr(),会发现代码那里的checked="checked",但是页面input上没有显示出来,所以改成使用prop 下面直接上代码...
  • var notChecked = $("input:checkbox").not("input:checked") ;//获取未被选择checkbox 要取值的话,用 each 即可
  • var IsMark = $("input:checkbox[name='IsMark']").map(function (index, elem) { if ($(this).is(":checked")) { return "true"; } else { return "false"; } }).get().join(',');

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 129,505
精华内容 51,802
关键字:

获取选择的checkbox