checkbox 选中？css实现点击选中效果

jquery 怎么选中checkbox指定的值

1、checkbox日常jquery*作。

现在我们以下面的html为例进行checkbox的*作。

<input id=”checkAll” type=”checkbox”/>全选

<input name=”subBox” type=”checkbox”/>项1

<input name=”subBox” type=”checkbox”/>项2

<input name=”subBox” type=”checkbox”/>项3

<input name=”subBox” type=”checkbox”/>项4

全选和全部选代码：

<script type=”text/j*ascript”>

$(function(){

$(“#checkAll”).click(function(){

$('input[name=”subBox”]').attr(“checked”,this.checked);

});

var$subBox=$(“input[name='subBox']”);

$subBox.click(function(){

$(“#checkAll”).attr(“checked”,$subBox.length==$(“input[name='subBox']:checked”).length? true: false);

});

});

</script>

checkbox属性：

var val=$(“#checkAll”).val();//获取指定id的复选框的值

var isSelected=$(“#checkAll”).attr(“checked”);//判断id=checkAll的那个复选框是否处于选中状态，选中则isSelected=true;否则isSelected=false;

$(“#checkAll”).attr(“checked”, true);// or

$(“#checkAll”).attr(“checked”,'checked');//将id=checkbox_id3的那个复选框选中，即打勾

$(“#checkAll”).attr(“checked”, false);// or

$(“#checkAll”).attr(“checked”,'');//将id=checkbox_id3的那个复选框不选中，即不打勾

$(“input[name=subBox][value=3]”).attr(“checked”,'checked');//将name=subBox, value=3的那个复选框选中，即打勾

$(“input[name=subBox][value=3]”).attr(“checked”,'');//将name=subBox, value=3的那个复选框不选中，即不打勾

$(“input[type=checkbox][name=subBox]”).get(2).checked= true;//设置index= 2，即第三项为选中状态

$(“input[type=checkbox]:checked”).each(function(){//由于复选框一般选中的是多个,所以可以循环输出选中的值

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

});

2、radio的jquery日常*作及属性

我们仍然以下面的html为例：

<input type=”radio” name=”radio” id=”radio1″ value=”1″/>1

<input type=”radio” name=”radio” id=”radio2″ value=”2″/>2

<input type=”radio” name=”radio” id=”radio3″ value=”3″/>3

<input type=”radio” name=”radio” id=”radio4″ value=”4″/>4

radio*作如下：

$(“input[name=radio]:eq(0)”).attr(“checked”,'checked');//这样就是第一个选中咯。

//jquery中，radio的选中与否和checkbox是一样的。

$(“#radio1”).attr(“checked”,”checked”);

$(“#radio1”).removeAttr(“checked”);

$(“input[type='radio'][name='radio']:checked”).length== 0?”没有任何单选框被选中”:”已经有选中”;

$('input[type=”radio”][name=”radio”]:checked').val();//获取一组radio被选中项的值

$(“input[type='radio'][name='radio'][value='2']”).attr(“checked”,”checked”);//设置value= 2的一项为选中

$(“#radio2”).attr(“checked”,”checked”);//设置id=radio2的一项为选中

$(“input[type='radio'][name='radio']”).get(1).checked= true;//设置index= 1，即第二项为当前选中

var isChecked=$(“#radio2”).attr(“checked”);// id=radio2的一项处于选中状态则isChecked= true,否则isChecked= false;

var isChecked=$(“input[type='radio'][name='radio'][value='2']”).attr(“checked”);// value=2的一项处于选中状态则isChecked= true,否则isChecked= false;

3、select下拉框的日常jquery*作

select*作相比checkbox和radio要相对麻烦一些，我们仍然以下面的html为例来说明：

<select name=”select” id=”select_id” style=”width: 100px;”>

<option value=”1″>11</option>

<option value=”2″>22</option>

<option value=”3″>33</option>

<option value=”4″>44</option>

<option value=”5″>55</option>

<option value=”6″>66</option>

</select>

看select的如下属性：

$(“#select_id”).change(function(){// 1.为Select添加*，当选择其中一项时触发

//code…

});

var checkValue=$(“#select_id”).val();// 2.获取Select选中项的Value

var checkText=$(“#select_id:selected”).text();// 3.获取Select选中项的Text

var checkIndex=$(“#select_id”).attr(“selectedIndex”);// 4.获取Select选中项的索引值,或者：$(“#select_id”).get(0).selectedIndex;

var maxIndex=$(“#select_id:last”).get(0).index;// 5.获取Select最大的索引值

/**

* jQuery设置Select的选中项

*/

$(“#select_id”).get(0).selectedIndex= 1;// 1.设置Select索引值为1的项选中

$(“#select_id”).val(4);// 2.设置Select的Value值为4的项选中

/**

* jQuery添加/删除Select的Option项

*/

$(“#select_id”).append(“<option value='*'>*option</option>”);// 1.为Select追加一个Option(下拉项)

$(“#select_id”).prepend(“<option value='请选择'>请选择</option>”);// 2.为Select*一个Option(第一个位置)

$(“#select_id”).get(0).remove(1);// 3.删除Select中索引值为1的Option(第二个)

$(“#select_id:last”).remove();// 4.删除Select中索引值最大Option(最后一个)

$(“#select_id [value='3']”).remove();// 5.删除Select中Value='3'的Option

$(“#select_id”).empty();

$(“#select_id”).find(“option:selected”).text();//获取select选中的 text:

$(“#select_id”).val();//获取select选中的 value:

$(“#select_id”).get(0).selectedIndex;//获取select选中的索引:

//设置select选中的value：

$(“#select_id”).attr(“value”,”Normal”);

$(“#select_id”).val(“Normal”);

$(“#select_id”).get(0).value= value;

//设置select选中的text，通常可以在select回填中使用

var numId=33//设置text==33的选中！

var count=$(“#select_id option”).length;

for(var i=0;i<count;i++)

{ if($(“#select_id”).get(0).options[i].text== numId)

{

$(“#select_id”).get(0).options[i].selected= true;

break;

}

}

通过上面的总结，应该对jquery的checkbox,radio和select有了一定的了解了吧，温故而知新，用多了就会变的熟练起来，即使有时候忘记了，也可以来翻一翻！

怎样设置checkbox是否选中

一，在VB.NET中

1，在设计时设置其属性

选中该控件，在属性窗口找到Checked属性，设置为True就是选中、设置为False就是不选中。在Checked属性右边的True或False文本上双击，可以改变该属性。

2，在运行时设置其属性

CheckBox1.Checked= True'设置为选中状态

CheckBox1.Checked= False'设置为非选中状态

二，在VB6中

1，在设计时设置其属性

选中该控件，在属性窗口找到Value属性，设置为1就是选中、设置为0就是不选中。

2，在运行时设置其属性

Check1.Value= 1'设置为选中状态

Check1.Value= 0'设置为非选中状态

JS 怎么控制 checkbox 选中

方法/步骤

1)通过js的元素选择器选择对应的元素DOM对象，如通过通过元素ID方式获:

varel=document.getElementById('元素ID')

2)获取到DOM对象后，可以通过设置该对象的checked属性来修改其选中状态：

//设置元素为选中状态el.checked=true;//设置元素为未选中状态el.checked=false;

注意事项

如果是通过jQuery则可以直接使用$('#元素ID').attr('checked', true)，如果设置为未选中则后面值改为false即可

拓展资料：

J*aScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为J*aScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

J*aScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常J*aScript脚本是通过嵌入在HTML中来实现自身的功能的。[

是一种解释性脚本语言（代码不进行预编译）。

主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。

可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。

J*ascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。J*ascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。

参考资料：百度百科：js

js怎样选中一个checkbox

有很多种方法啊，一般常用的有两种。

一是给定id，用getElementById(id号)来获取，如果有多个复选框可以依据具体情况设定不同id以区别。如：

<input

type=”checkbox”

id=”chk1″

/>

<input

type=”checkbox”

id=”chk2″

/>

<input

type=”checkbox”

id=”chk3″

/>

获取时只需要document.getElementById(“chk1”)。

还有一种是这种情况：

<div

id=”container”>

<input

type=”checkbox”

value=”aaa”

/>

<input

type=”checkbox”

value=”bbb”

/>

<input

type=”checkbox”

value=”ccc”

/>

</div>

这时可以先获取复选框的父级，再利用索引获取需要的复选框。

比如现在要获取上方第二个checkbox，就可以这样做：

var

checkboxArr

=

document.getElementById(“container”).getElementsByTagName(“input”);

那么第二个checkbox就是checkboxArr[1]（索引是从0开始的）。

获取到需要的checkbox之后只需设置其checked属性为true就行了。如：

document.getElementById(“chk1”).checked

=

true;

或

checkboxArr[1].checked

=

true;