js jquery 给 checkbox value属性赋值？

Posted 2023-03-28

<input type="checkbox" name="Ishot" id="Ishot" value="" onclick="SetValue('Ishot')"/>热门

如上页面中就一个checkbox 一个选项
这里需要在SetValue方法中根据 “选勾”或者“不选勾” 来给value赋不同的值
这是JS中的写法：
var obj = document.getElementsByName(id);
if(obj[0].checked)
obj[0].value='2';
else
obj[0].value='1';

上面JS只有在选勾的情况下value=2
else后面的语句无效（不选勾的时候value并不是1，而是为空）

求解~！
另外也求jquery代码实现以上功能。谢谢！
首先我写错了，初始值必须要为2
<input type="checkbox" name="Ishot" id="Ishot" value="2" onclick="SetValue('Ishot')"/>热门

如果第一次选上勾并且保存到数据库value=2
然后下次再编辑的时候 ，如果value初始值为1或者空的话，假设在页面中我修改的是其他信息，checkbox这个不需要改变，当提交的时候，数据库会把原来checkbox的value值改成1或者空了。

所以这里需求是：
在编辑的时候需要，当 “取消勾” 动态赋值给 checkbox 中 value值为“1”
求解~

参考技术A var obj = $('#'+id);
if(obj.attr('checked'))
obj.val(2);

else
obj.val(1);


另外：<input type="checkbox" name="Ishot" id="Ishot" value="1" onclick="SetValue('Ishot')"/>热门
你直接给一个初始值就可以了啊！！！追问

请查看如上补充问题，求解，谢谢！

本回答被提问者采纳

jQuery和js使用点滴

1、checkbox全选按钮

1      <input type="checkbox" name="allcheck" id="allcheck" / >全选
2      <input type="checkbox" name="subBox" value="1" / >1
3      <input type="checkbox" name="subBox" value="2" / >2
4      <input type="checkbox" name="subBox" value="3" / >3
5      <input type="checkbox" name="subBox" value="4" / >4
6      <input type="checkbox" name="subBox" value="5" / >5

View Code

1     //全选和全不选功能按钮
2     $("#allcheck").click(function() {
3         var checked = $("#allcheck").is(‘:checked‘);
4         $(‘input[name="subBox"]‘).prop(‘checked‘, checked);                
5     });

View Code

2、判断checkbox是否选中

<input type="checkbox" name="allcheck" id="allcheck" />

 var checked = $("#allcheck").is(‘:checked‘);

 

3、遍历表格的数据，然后通过json传递到后端

<table class="table ">
   <thead>
    <tr data-type="1">
        <th>id</th>
        <th>名称</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
   </thead>
   <tbody id="rows">    
    <tr data-type="2">
        <th>1</th>
        <th>张</th>
        <th>22</th>
        <th>男</th>
    </tr>
    <tr data-type="3">
        <th>2</th>
        <th>张</th>
        <th>18</th>
        <th>女</th>
    </tr>
    <tr data-type="4">
        <th>3</th>
        <th>张</th>
        <th>24</th>
        <th>男</th>
    </tr>
    <tr data-type="5">
        <th>4</th>
        <th>张</th>
        <th>22</th>
        <th>女</th>
    </tr>
   </tbody>
</table>
<button onclick="gettableInfo()"> 获得表格数据</button>
function gettableInfo() {
    var objs = new Array();
    $(‘#rows tr‘).each(function(index){
        var obj = {};
        var tdArr = $(this).children();    
        
        obj["sequence"] = index;
        //获取data-type中的值    
        obj["type"] = $(this).data(‘type‘);
        obj["id"] = tdArr.eq(0).html();
        obj["name"] = tdArr.eq(1).html();
        obj["eag"] =tdArr.eq(2).html();
        obj["sex"] =tdArr.eq(3).html();
        
        objs.push(obj); 
    });
    
    alert(JSON.stringify(objs));
    return objs;
}

4、实现点击按钮表格行的上下移动

 1     <style type="text/css">
 2         .a{
 3             background: #666;
 4         }
 5     </style>
 6 
 7 <table class="table ">
 8    <thead>
 9     <tr data-type="1">
10         <th>id</th>
11         <th>名称</th>
12         <th>年龄</th>
13         <th>性别</th>
14     </tr>
15    </thead>
16    <tbody id="rows">    
17     <tr data-type="2" onclick="clicktr(this)" >
18         <th>1</th>
19         <th>张</th>
20         <th>22</th>
21         <th>男</th>
22     </tr>
23     <tr data-type="3" onclick="clicktr(this)" >
24         <th>2</th>
25         <th>张</th>
26         <th>18</th>
27         <th>女</th>
28     </tr>
29     <tr data-type="4" onclick="clicktr(this)" >
30         <th>3</th>
31         <th>张</th>
32         <th>24</th>
33         <th>男</th>
34     </tr>
35     <tr data-type="5" onclick="clicktr(this)" >
36         <th>4</th>
37         <th>张</th>
38         <th>22</th>
39         <th>女</th>
40     </tr>
41    </tbody>
42 </table>
43 
44 <button id="prev" > 上移</button>
45 <button id="next" > 下移</button>
46 
47 var TROBJ=null;
48     //上下移动
49     $("#prev").click(function() {
50         if(TROBJ==null){
51             alert("请选择一行");
52         }
53         $(TROBJ).insertBefore($(TROBJ).prev());
54     });
55     $("#next").click(function() {
56         if(TROBJ==null){
57             alert("请选择一行");
58         }
59         $(TROBJ).insertAfter($(TROBJ).next());
60     });
61 
62 function clicktr(obj) {
63     TROBJ=obj;
64 
65     $(‘#rows tr‘).each(function(index){
66 
67         if ($(TROBJ).data(‘type‘)!=$(this).data(‘type‘)) {
68             //如果不等于当前对象，将class移除
69            $(this).removeClass("a");
70         }
71         
72     })
73     // $(obj).addClass("a"); 
74     $(obj).toggleClass("a");
75 }

View Code