checkbox已設置為checked--true-但不勾選問題解決方法(只第一次勾選有效)

一、出現的問題及解決方法:?
今天在寫一個table相關插件的時候無意中發現了這樣一個問題,記得以前在寫這種控制checkbox選中與非選中的代碼時并沒有這種bug,當時也是用的checked屬性,而現在卻行不通了。

于是乎做了以下測試,測試demo:一個按鈕控制checkbox的選中狀態。?
這里寫圖片描述?
測試js代碼:

 $("#test_btn").click(function(){var state = $("#test_check").attr('checked');$("#test_check").attr('checked',!state);})

效果是第一回合點擊有效:第一次點擊選中,第二次點擊非選中,從第三次點擊開始就沒有任何反應了,但是checkbox元素的checked屬性卻依然在切換:?
這里寫圖片描述?
即使是checked:”checked”也依然是非選中狀態。

問題就在jquery中的attr和prop區別?:

二、jquery中的attr和prop區別?
在高版本的jquery(jQuery API明確說明,1.6+的jQuery要用prop)引入prop方法后,什么時候該用prop?什么時候用attr?它們兩個之間有什么區別?這些問題就出現了。?
關于它們兩個的區別,網上的答案很多,其實很簡單:?
對于HTML元素本身就帶有的固有屬性,在處理時,使用prop方法。?
對于HTML元素我們自己自定義的DOM屬性,在處理時,使用attr方法。?
舉個栗子:

<a href="#" class="a" id="b" action="delete"></a>

栗子中,a元素的DOM屬性有“href、id和action”,很明顯,前兩個是固有屬性,而后面一個“action”屬性是我們自己自定義上去的,a元素本身是沒有這個屬性的。這種就是自定義的DOM屬性。處理這些屬性時,建議使用attr方法。使用prop方法取值和設置屬性值時,都會返回undefined值。

現在再說說我們之前那個栗子,也就是checkbox的問題。

<input type="checkbox" id="test_check1">
<input type="checkbox" id="test_check2" checked='checked'>

像checkbox,radio和select這樣的元素,選中屬性對應“checked”和“selected”,這些也屬于固有屬性,因此需要使用prop方法去操作才能獲得正確的結果。?
而如果使用attr:

$("#test_check1").attr("checked") == undefined
$("#test_check2").attr("checked") == "checked"

而如果使用prop,則正常:

$("#test_check1").prop("checked") == false
$("#test_check2").prop("checked") == true

所以歸根到底就是attr和prop的區別。

參考原文:http://blog.csdn.net/alex2917/article/details/51111431
http://blog.sina.com.cn/s/blog_6657f20e0101g793.html

轉載于:https://www.cnblogs.com/fatty-yu/p/7640150.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/454444.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/454444.shtml
英文地址,請注明出處:http://en.pswp.cn/news/454444.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Python 錯誤和異常小結[轉]

原文鏈接 http://blog.csdn.net/sinchb/article/details/8392827 事先說明哦&#xff0c;這不是一篇關于Python異常的全面介紹的文章&#xff0c;這只是在學習Python異常后的一篇筆記式的記錄和小結性質的文章。什么&#xff1f;你還不知道什么是異常&#xff0c;額... 1.Py…

Django REST framework 認證、權限和頻率組件

認證與權限頻率組件 身份驗證是將傳入請求與一組標識憑據&#xff08;例如請求來自的用戶或其簽名的令牌&#xff09;相關聯的機制。然后 權限 和 限制 組件決定是否拒絕這個請求。 簡單來說就是&#xff1a; 認證確定了你是誰權限確定你能不能訪問某個接口限制確定你訪問某…

高速率AVS整數變換的匯編實現與優化

1 引言 AVS標準Ⅲ采用的8x8整數變換在獲得較H&#xff0e;264更高的壓縮率和主觀圖像質量的同時&#xff0c;增加了算法的實現復雜性和時間開銷。本文重點研究AVS編解碼器的整數變換模塊&#xff0c;針對不同的算法實現模式&#xff0c;在原有Visual C6&#xff0e;0整數變換模…

計算機與廣播電視論文,淺談廣播電視中計算機技術的作用論文.pdf

1、計算機技術在廣播電視的媒體內容中有重要應用在以往的廣播電視中&#xff0c; 媒體內容主要分為音頻和視頻兩種信號&#xff0c; 在傳輸的過程中使用的是模擬信號&#xff0c; 但模擬信號受到的外界干擾因素較為明顯&#xff0c; 因此廣播電視傳播的媒體內容受到影響&#x…

opencv安裝教程python3.7_Mac下安裝使用Python-OpenCV,解決opencv3安裝完成無法使用的問題 - pytorch中文網...

OpenCV是一個跨平臺計算機視覺庫&#xff0c;可以運行在Linux、Windows、Android和Mac OS操作系統上。提供了Python、Ruby、MATLAB等語言的接口&#xff0c;實現了圖像處理和計算機視覺方面的很多通用算法。 Mac安裝OpenCV 在我們的深度學習的過程中&#xff0c;對于圖像&#…

NodeJS在CentOs7下安裝

node下載地址:https://nodejs.org/en/download/ 1.安裝gcc $ yum install gcc-c 2.解壓最新版本 $ mkdir /usr/local/node$ tar zxvf node-v6.11.4.tar.gz $ cd node-v6.11.4$ ./configure --prefix/usr/local/node# 在當前目錄下編譯安裝Node$ make$ make install 3.驗證安裝 …

Python功能之反射

有如下文件: index.py 1<span style"font-family:宋體, SimSun;">#!/usr/bin/env python<br data-filtered"filtered"># -*- coding:utf-8 -*-<br data-filtered"filtered">__author__ ryan<br data-filtered"filter…

Django REST framework 分頁

分頁模式 rest framework中提供了三種分頁模式&#xff1a; from rest_framework.pagination import PageNumberPagination, LimitOffsetPagination, CursorPagination 全局配置 REST_FRAMEWORK {DEFAULT_PAGINATION_CLASS: rest_framework.pagination.LimitOffsetPaginat…

解析H.264視頻編解碼DSP實現與優化

引言 基于互聯網的數字視頻產業前景看好&#xff0c;而3G的規模部署&#xff0c;也會推動移動視頻通信成為現實。但數字化后的視頻圖像具有數據海量性&#xff0c;給圖像的存儲和傳輸造成較大的困難。數字視頻產業&#xff0c;是指數字內容中以數字視頻形態為主的文化創意和傳播…

ap計算機科學a買什么書,準備AP*計算機科學A考試-第1部分

你將學到什么Identify the use and proper use of Variables, Conditionals, Objects and primitives, control structures, booleans, lists and arrays, and Exceptions.Implement problem descriptions in well designed code.Identify and begin to design algorithms to s…

python 打包exe_python如何封裝為exe

1、首先進入python安裝路徑D:\Python27\Scripts下&#xff0c;查看pip或easy_install是否安裝。2、確保安裝了pip或者easy_install&#xff0c;在cmd命令行下輸入“easy_install”&#xff0c;沒有提示“xxx不是內部或外部命令……”&#xff0c;就說明easy install工具安裝成功…

CentOS7安裝Hadoop2.7完整步驟

總體思路&#xff0c;準備主從服務器&#xff0c;配置主服務器可以無密碼SSH登錄從服務器&#xff0c;解壓安裝JDK&#xff0c;解壓安裝Hadoop&#xff0c;配置hdfs、mapreduce等主從關系。 1、環境&#xff0c;3臺CentOS7&#xff0c;64位&#xff0c;Hadoop2.7需要64位Linux&…

Django REST framework 解析器和渲染器

解析器的作用 解析器的作用就是服務端接收客戶端傳過來的數據&#xff0c;把數據解析成自己可以處理的數據。本質就是對請求體中的數據進行解析。 在了解解析器之前&#xff0c;我們要先知道Accept以及ContentType請求頭。 Accept是告訴對方我能解析什么樣的數據&#xff0c…

MyBatis的學習之路(二)

上篇文章介紹了MyBatis的配置文件&#xff0c;現在來介紹實體映射文件Mapper.xml。 說道實體映射文件&#xff0c;就不得不說一下實體與表之間的映射關系&#xff1a;單表映射和多表映射。 a. 單表映射 1 public class Admin{ 2 private String id; 3 private String n…

計算機一級實驗素材題目,計算機一級EXCEL操作題整理素材(12頁)-原創力文檔...

素材摘錄&#xff0c;文檔可編輯分享PAGE 頁碼頁碼/NUMPAGES 總頁數總頁數單元格合并首先選中你要合并的單元格&#xff0c;然后找到EXCEL上的開始分區里的這種圖標或者是含有“合并”兩字的位置如圖1-1&#xff0c;如果題目要求的是要你合并單元格并讓內容居中&#xff0c;你就…

python爬取toefl_spark學習進度6-Python爬取數據的四個簡單實例

今天本來想把昨天安裝的intellij配置好&#xff0c;但是一直顯示沒有網絡&#xff0c;網上查了相關資料也沒有查出來解決辦法。然后暫停了intellij的配置&#xff0c;開始做了幾個Python爬取簡單數據的實例&#xff0c;先做了幾個最簡單的&#xff0c;以后再加大難度&#xff0…

Django REST framework 版本

API 版本控制允許我們在不同的客戶端之間更改行為&#xff08;同一個接口的不同版本會返回不同的數據&#xff09;。 DRF提供了許多不同的版本控制方案。 可能會有一些客戶端因為某些原因不再維護了&#xff0c;但是我們后端的接口還要不斷的更新迭代&#xff0c;這個時候通過…

AngularJS中的過濾器(filter)

AngularJS中的過濾器是用于對數據的格式化&#xff0c;或者篩選的函數&#xff0c;可以直接通過以下語法使用&#xff1a; {{expression|filter}} {{expression|filter1|filter2}} {{expression|filter1:param1,param2,...|filter2} 過濾器的種類有number&#xff0c;currency&…

計算機考試上傳照片教程,電腦照片傳到iPhone手機的詳細步驟【圖文】

蘋果自帶的iOS系統是不可以隨便和電腦進行數據交換的&#xff0c;必須使用iTunes軟件。許多用戶為此問題困擾&#xff0c;我們有什么可以把電腦照片傳到iPhone手機&#xff1f;下面我們就一起來看看把電腦照片傳到iphone設備的詳細步驟。具體方法如下&#xff1a;1&#xff0c;…

javaweb 導出文件名亂碼的問題解決方案

fileName new String(fileName.getBytes("ISO8859-1"), "UTF-8"); 或者 String finalFileName null; if(StringUtils.contains(userAgent, "MSIE")){//IE瀏覽器 finalFileName URLEncoder.encode(fileName,"UTF8"); }else if(Str…