Jquery 操作Html 控件 CheckBox、Radio、Select 控件

在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如
checkbox、radio、select,用 Jquery
库操作其他会便利广大,上面用Jq对那些控件的操作进行3个宏观的代码总括。

在时光丰富,决定影响重大的情事下,大家反复须求列支全部的实惠方案,通过有根有据地分析,多维度比较各类方案的优劣,最终选出最佳方案。比如选大学、就业趋势、在哪买房、跟什么人结婚那种就是悟性决策。

(2) 索引为 2 的option 项 被选择
$(“select”)[0].selectedIndex
= 2;

或者
$(“select”).get(0).selectedIndex = 2; 

或者 $(“select
option[index=2]”).attr(“selected”,
true);

咱俩平常生活中的超过半数表决都依赖于直觉决策,它之所以能有较高的准确性,其实是经历积累使然,它的助益由此可见,省时火速,不开支大家过多的生气,缺点是在未有大批量经验样本积累的情景下,准确率较低。

–=源码下载=–

仲裁的方法论其实在上头已经关系过一些,列出来无非以下几点。

(1)采纳具有的 Radio控件
//依照input类型选用
$(“input[type=radio]”)
 //等同于文档中的 $(“input:radio”)

//依照名称采取
$(“input[name=edu]”)

在理性方式下,一切以可预测的结果为导向,尽量遮挡心绪和习惯的偏好。

3、选择: 

若是细加商讨,我们就会意识,理由再充裕,也不必然能同日而语行动的依照。第①理由不自然会周到,第②说辞只怕是为了合理化行动而编的。

4、取值:   

灵魂的弹指间承受能力和须臾间反应能力一向影响了我们的核定水平。

});

在岁月紧、压力大、变化复杂的自然环境下,大家必须弹指间做出决定,在那个时候,大家使用的是直觉决策。

(1)禁用全体的Radio
$(“input:radio”).attr(“disabled”,
true);

或者
$(“input[name=edu]”).attr(“disabled”, true);
 

接下去讲讲需求逃避的裁定陷阱。

(3)拿到全体禁用的 Radio 控件
$(“input:radio:disabled”)
结果回到:
<input name=”edu”
value=”2″ type=”radio” disabled=”disabled”
/><span>研究生</span>
<input name=”edu”
value=”3″ type=”radio”
disabled=”disabled”/><span>博士生</span>

1.陈列独具的灵光方案

(3) 获得全体禁用的 checkbox 控件:
$(“input[type=checkbox]:disabled”)  结果回到:
<input id=”ckb3″ name=”ckb” disabled=”disabled” value=”2″
type=”checkbox” /><span>乒乓球</span>
<input id=”ckb4″ name=”ckb” disabled=”disabled” value=”3″
type=”checkbox” /><span>羽毛球</span> 

1.依傍经验找到开头冒出来的方案

(2)启用有些禁用的 checkbox 控件:
$(“input:checkbox:disabled”).attr(“disabled”,
false);
 

活着中的景况很复杂,有的采取中间不能直接相比较,那时候大家就要把各种选项带来的市值量化,而最广泛的量化单位就金钱。

2、禁用:

在直觉情势下,做定夺不是相比各种方案的进度,而是模仿演练的结果。

(2)禁用select中所有option
$(“select
option”).attr(“disabled”, true);

理性决策要追求得是资产少、收益大的好结果。

(2)禁用索引为1的Radio控件
$(“input:radio:eq(1)”).attr(“disabled”,
true);
 

02.驾鹤归西相近的主宰带来的感受,影响着当时的操纵。

  ① 、查找控件:

那套行动论必须根据大批量的操练,才能开放结果,最终它不仅能帮您快捷科学的核定,更能作育你的个体条件,孵化你的历史观。

(6)禁用未checked 的RadioButton控件
$(“input:[type=radio][checked=false]”).attr(“disabled”,
true);
 

3.动用最有优势的方案

图片 1

自小编在很时辰候被1个大熊猫的木偶吓到过(那么些玩偶会发出声音),以致于作者长大后平昔很排斥会发声的玩偶,重来没有买过。

3、取值:

最经典的例证就是去影院看看一部烂电影,那时你有五个选项,马上离开和后续看下去,你会怎么选?“票钱都花了,来都来了,不看可惜了。”那事实上不大概同日而语你采用继续看下去的裁决理由。

(3)判断value=0的checkbox是还是不是禁用:
    if
($(“input[name=ckb][value=0]”).attr(“disabled”) == true)
{

         
alert(“不可用”);

   
}

   else
{

       
 alert(“可用”);

   
}

2.根据事实,分析相比较各方案优劣

5、在select中插入option 

在脑海中可视化的切切实实的操作方式,是基于方法论的方法论。

<input id="ckb1" name="ckb" checked="checked" value="0" type="checkbox" />篮球
<input id="ckb2" name="ckb" checked="checked" value="1" type="checkbox" />排球
<input id="ckb3" name="ckb" disabled="disabled" value="2" type="checkbox" />乒乓球
<input id="ckb4" name="ckb" disabled="disabled" value="3" type="checkbox" />羽毛球

理性决策:

(1)option 值为 2 的被增选:
  var v =
$(“select option[value=2]”).attr(“selected”);

  if (!v) {
  $(“select
option[value=2]”).attr(“selected”, true);
  }

要求条件是为着服务于本身的目标,分明目标是怎么样,才能帮您火速找到须要条件。

(2)全不选:
$(“input:checkbox”).attr(“checked”,
false);
 

大家在宁静的时候心跳缓和,在忧虑的时候心跳加速,而令人担忧总会让咱们做出错误的决定。

(1)清空全数option
$(“select
option”).empty();
 

举个自个儿的事例:小编买洗发水的目的是为着洗干净头发,所以自个儿的须求条件是1.能用,没了。作者买键盘是为着能火速打字,偶尔也能玩比赛游艺,同时仍可以发(zhuang)光(bi)。于是本身买了达尔优的数字键盘。

 1、禁用:

譬如在工作中同事让您受了委屈,你感觉受到了不公道的看待,你想要去报复一下,那是你的理由,但您只要应用理性决策,就不肯定会如此去做,因为您的报复行为容许会影响你的差事前景。

(2)转换到Dom成分数组来开展控制选中:
$(“input:radio[name=edu]”).get(1).checked
= true;

末尾,请记住,全体标准可信赖的直觉决策全体来源于于多量的理性决策积累。

(5)得到全体checked的checkbox控件
$(“input:checkbox:checked”) 
结果回到:
<input id=”ckb1″
name=”ckb” checked=”checked” value=”0″ type=”checkbox”
/><span>篮球</span>
<input id=”ckb2″
name=”ckb” checked=”checked” value=”1″ type=”checkbox”
/><span>排球</span> 

决策分为直觉决策和理性决策,我们先来说直觉决策。

(2)获取最大项的目录:
var maxIndex =
$(“select option:last”).attr(“index”)

或者  var maxIndex =
$(“select option”).length – 1

做到比完美更器重。比如做试验试卷,大家会以拿分为主,能想出解答路径会立即开始做,而不会想还有没有其余解答方法。选购一副动铁耳机也不会非要比对完全体的动圈耳机质量,只要能满意本身须求就可以了。

一、Jquery 对 CheckBox 的操作:

在直觉形式下,人的裁定有多少个特点。

(5)获取未checked的 RadioButton 控件
$(“input:radio[checked=false]”).attr(“disabled”,
true);

结果回到:
<input name=”edu”
value=”1″ type=”radio” /><span>本科</span>
<input name=”edu”
value=”2″ type=”radio” disabled=”disabled”
/><span>研究生</span>
<input name=”edu”
value=”3″ type=”radio”
disabled=”disabled”/><span>博士生</span>

从生物学的角度来看,无意识和发生意识知觉之间有半分钟的原状延迟,专业运动员正是利用这些延迟做出了火速的判定,让身体做出反应。那就是直觉决策。

(7)获得value 为 0 的checkbox 控件
$(“input[type=checkbox][value=0]”)
结果再次来到:
<input id=”ckb1″ name=”ckb” checked=”checked” value=”0″
type=”checkbox” /><span>篮球</span>

那是一种经验识别。比如看见穿白大褂的就觉得是先生,看见穿警服的就觉着是警察,看见中年人拿着保温杯就以为其中泡的是枸杞。

(1)在首职位插入 option 并采纳
$(“select”).prepend(“<option
value=’0′>请选择</option>”);

$(“select
option[index=0]”).attr(“selected”, true);
 

整整决策进程十一分轻松,不纠结,连忙科学。当然采取之后自家也会复盘,看看是否整个决策进度中有新的经历和新的信息进来,假设有,会依据事态调整不可或缺的规则。

(3)在定位地方插入 比如第三个option 项之后插入 新的option 并选拔
$(“<option
value=\”5\”>哪吒三太子闹海</option>”).insertAfter(“select
option[index=0]”);

或者$(“select
option[index=0]”).after(“<option
value=\”5\”>哪吒三太子闹海</option>”);


$(“select option[index=1]”).attr(“selected”,
true);

2.为每一个条件按紧要性程度打分并排序

(4)获得checked的 RadioButton 控件
$(“input:radio:checked”) //等同于
$(“input[type=radio][checked]”)

结果重临:
<input name=”edu”
value=”0″ type=”radio” checked=”checked”
/><span>专科</span>

美职篮篮球的赛管上时不时有好多良好的绝杀镜头,而咱们常说那多少个成功监制翻盘的第3先生有一颗大心脏,他们屡屡能在关键时刻保持冷静,正是依靠的命脉和大脑之间的良性效率,一颗反应快速的心脏使他们保持冷静,辅助大脑疾速思考。

6、取值:

1.给拔取丰盛须要条件

(2)在尾地方插入 option 并拔取
$(“select”).append(“<option
value=\”5\”>哪吒闹海</option>”);

var maxIndex =
$(“select option:last”).attr(“index”)

$(“select
option[index=” + maxIndex + “]”).attr(“selected”,
true);
 

量化的进程是十分不合理的,比如对于接下去的壹个时辰是去看摄像依然看书,每一个人在内心给它们标出的价钱是不一样等的,约等于说决策的高低本身也是相提并论的,只要您分明自身的目标,就不难做出让自身不后悔的决定。

(1)全选:
$(“input:checkbox”).attr(“checked”,
true);

那种陷阱其实是指在篇章最起始的经验方式中进入不起眼的变量,而造成实际情状暴发了变化。

4、选择:

而3其实是个很经典的数字,借使您无法在二个要求条件内把业务或协调的需要描述清楚,注解您还平昔不真的搞懂它。

(3)启用禁用的Radio控件
$(“input:radio:disabled”).attr(“disabled”,
false);
 

它由以下四步组成:

$(“input:radio:checked”).val()

01. 忘记计算机会费用。

一 、查找控件:

沉淀开销是指由过去的决策已经发生的,不或许由现行或今后的裁决暴发变动的本金。

留意:each 中不可以用break
用return false 代替,continue 用 return true 代替
$(“select
option”).each(function () {

  if ($(this).text() ==
“熊出没”) {

  $(this).remove();
  return false;
  }

末尾讲讲决策的行动论。

<input name="edu" value="0" type="radio" checked="checked" />专科
<input name="edu" value="1" type="radio" />本科
<input name="edu" value="2" type="radio" disabled="disabled" />研究生
<input name="edu" value="3" type="radio" disabled="disabled"/>博士生

在理性方式下,人的核定唯有2性格子,结果比理由主要。

(3)删除第③个option
$(“select
option[index=0]”).remove();
 

而只如果一道决定,则要充裕考虑各方的立足点,分析种种观点中的个人偏好,最后的主宰往往是各方博弈的结果。

(3)禁用value=2 的option
$(“select
option[value=2]”).attr(“disabled”, true);

直觉决策:

2、禁用: 

当然,若是你其实无聊,回去也一直不想做的工作,也足以再三再四呆下去,那时候你的裁定理由是面向将来和今后的,而不是病故。要不掉入这一个陷阱就要完结既往不念,纵情未来。

(4)禁用当前一度启用的Radio控件
$(“input:radio[disabled=false]”).attr(“disabled”,
true);
 

03.依照误导性经验暴发错误预判。

(4)拿到全部启用的 Radio 控件
$(“input:radio[disabled=false]”)
结果回到:
<input name=”edu”
value=”0″ type=”radio” checked=”checked”
/><span>专科</span>
<input name=”edu”
value=”1″ type=”radio”
/><span>本科</span>

机会花费是指你为了那几个选项而放任的其他采用所带来的最大收入。

<select id="cmbxGame">
   <option value="0" selected="selected">黑猫警长</option>
   <option value="1" disabled="disabled">大头儿子</option>
   <option value="2">熊出没</option>
   <option value="3">喜羊羊</option>
</select>

3.假设可行,立时实施

(1)禁用所有的checkbox控件:
$(“input:checkbox”).attr(“disabled”,
true)
 

人生的要紧决策能重新采纳的机遇不多,容错率很低,我们无非在平日的常见的小决策和中决定中持续训练,才能伸张重点决定时大家选取正确的可能率,但你要明了,即便做了再多的勤学苦练,也无从保险我们肯定在下次增选成功,我们始终要直面的是不分明的前程。

(4)得到全数启用的checkbox控件
$(“input:checkbox[disabled=false]”)
结果重临:
<input id=”ckb1″
name=”ckb” checked=”checked” value=”0″ type=”checkbox”
/><span>篮球</span>
<input id=”ckb2″
name=”ckb” checked=”checked” value=”1″ type=”checkbox”
/><span>排球</span> 

4.复盘

(1)获取选中项索引: jq 中的 get 函数是将jq对象转换到了dom成分
 var
selectIndex = $(“select”).get(0).selectedIndex;

或者 var
selectIndex = $(“select
option:selected”).attr(“index”);

此间实在依照了Occam剃刀原则:如无须求,勿增实体。不举办说,有趣味可以自查百科。

(2) 依照目录获取checkbox控件:
$(“input:checkbox:eq(1)”)  结果回到:<input id=”ckb2″
name=”ckb” value=”1″ type=”checkbox”
/><span>排球</span>

03.如若行的通,不再寻找更优的解决措施。

二、Jquery 对 Radio 的操作:

又比如说你开车从A地方到B地方,有两选个拔取,走路线C会撞击拥堵,而行动线D,不堵但必要收取过路费(上快捷),影响您做取舍的,不该只是过路费,还有你能利用两条路线到达时刻差所创立的最大价值。

(2)删除 value=2 的option
$(“select
option[value=2]”).remove();
 

另一种核定格局是悟性决策。

2、选择:

拉长决策能力相对是有迹可循的,接下去本人将从决定的归类、决策的方法论、决策的陷阱和仲裁的行进论多少个地点给我们分享近日本身所通晓到和施行过的仲裁唇齿相依的心得体会。

图片 2

譬如说专业的球类运动员与老百姓的视觉反应其实是大概的,而她们很快的地点在于肉体上的反响。

(4)启用被剥夺的option
$(“select
option:disabled”).attr(“disabled”, false);

3.把规范裁减到多个

(1)禁用select 控件
$(“select”).attr(“disabled”,
true);

02. 把沉陷成本总结了进来。

(2)根据目录拿到 Radio控件
$(“input:radio:eq(1)”)
结果回到:<input
name=”edu” value=”1″ type=”radio”
/><span>本科</span>

自个儿给行动论的定义是:

(6)获得value 为 0 RadioButton 控件
$(“input[type=radio][value=0]”)
结果回到:<input
name=”edu” value=”0″ type=”radio” checked=”checked”
/><span>专科</span>

若果是私房决定,可以听半数以上人怎么说,参考少数人的理念,最终本身做决定。所谓兼听则明,偏听则暗。

  function GetCkboxValues() {
    var str=””;
 
 $(“input:checkbox:checked”).each(function () {

     switch ($(this).val()) {
      case “0”:
             str += “篮球,”;
             break;
     case “1”:
             str += “排球,”;
      break;
     case “2”:
             str += “乒乓球,”;
             break;
     case “3”:
            str += “羽毛球,”;
            break;
     }
   });
   str=str.substring(0, str.length –
1)

 
}

譬如把网球的场地换来高原,或把球的重量改变的情形下,专业运动员的失误率比普通人更高。那是因为状态改变而导致的经历失效。所以在以经验情势为判断基础的景色下,要十二分留意环境中的变量是还是不是变动。

④ 、删除select 控件中的option 

那是一种心境标记。比如你看了一部科学的影片,你很肯定电影的制片人,于是下次再相见她的视频热映,去看的或者就必然会高于不去看的或然。

  function GetCbxSelected() {
    var v
= $(“select option:selected”).val();

    var t
= $(“select option:selected”).text();

   
alert(“值:” + v + “文本:” + t);

}

2.在心头模拟判断方案是或不是有效

(4)删除 text=”熊出没” 的option
$(“select
option[text=熊出没]”).remove();
 //此方法有个别浏览器不支持用上边的方法替代

因为票钱和还原电影院所花的光阴已经消耗了,是沉没开支,没办法退票没办法重来,而一旦您待下去,只会继续消耗你的高尚时间和精力。

三 、获取接纳项的目录: 

01.大脑通过一些消息相比较过往经验,飞速做出判断。

(5)禁用 checked 的RadioButton控件
$(“input[type=radio][checked]”).attr(“disabled”,
true);
 

那种场馆得以说是满天飞,例子如拾草芥,比如您有多个钟头的时刻,你可以挑选逛Taobao也得以采用工作,假设你三个小时的行事能赚到100元,那么只要您选拔逛Tmall,这些裁定(逛Tmall)的机会开支就是100元。

(7)禁用value=0 的RadioButton
$(“input[type=radio][value=0]”).attr(“disabled”,
true);
 

(6)获取具有未checkd的checkbox控件
$(“input:checkbox:[checked=false]”) 
结果回到:
<input id=”ckb3″
name=”ckb” disabled=”disabled” value=”2″ type=”checkbox”
/><span>乒乓球</span>
<input id=”ckb4″
name=”ckb” disabled=”disabled” value=”3″ type=”checkbox”
/><span>羽毛球</span> 

(1)判断value=1
的radio控件是或不是选中,未入选则当选:
  var v =
$(“input:radio[value=1]”).attr(“checked”);
  if (!v)
{
 
$(“input:radio[value=1]”).attr(“checked”, true);
 

三、Jquery 对 Select 操作

(1) 选取具有的 checkbox  控件:
据悉input类型选拔: $(“input[type=checkbox]”)
  等同于文档中的 $(“input:checkbox”)
依照名称拔取:$(“input[name=ckb]”)

(3)反选:
   $(“input:checkbox”).each(function ()
{

      if ($(this).attr(“checked”)) {
       
//$(this).removeAttr(“checked”);

        $(this).attr(“checked”,
false);

     }
     else {
       $(this).attr(“checked”,true);
    }
 
});