2016-08-02 50 views
-2

因此,我有這張表,我希望單選按鈕將圖像更改爲複選標記,他們會這樣做(稍後介紹,稍後再介紹),並且我希望每當點擊其中一個單選按鈕時,其他單選按鈕變成X標記的圖片(http://i.imgur.com/RcuPIGF.png)。當單擊另一個單選按鈕時如何更改單選按鈕的圖像

這是我的代碼到目前爲止:http://liveweave.com/4poY04

正如您所看到的,無論您單擊哪個單選按鈕,第一個單選按鈕總是會更改爲複選標記圖像。我嘗試過更改單選按鈕的ID,但只讓第二個按鈕變爲複選標記圖像。

+4

你能張貼相關的代碼中的問題嗎? – gcampbell

+1

鏈接到我的代碼使用的複選標記:http://i.imgur.com/QAUUxYF.jpg。 – ChippeRockTheMurph

+0

*尋求調試幫助的問題(「爲什麼這個代碼不工作?」)必須包含所需的行爲,特定的問題或錯誤以及在問題本身中重現**的最短代碼**。沒有明確問題陳述的問題對其他讀者無益。請參閱:如何創建[mcve]。* – BSMP

回答

2

你的代碼很醜。我只更新了你的工作,現在工作。

function changeImage(id, imgName) 
 
    { 
 
    // reset images 
 
    for (var i = document.getElementsByClassName('theimage').length - 1; i >= 0; i--) { 
 
    document.getElementsByClassName('theimage')[i].src = "http://i.imgur.com/DGofFGc.png"; 
 
    } 
 
    image = document.getElementById(id); 
 
    image.src = imgName; 
 
    }
table, th, td { 
 
    border: 2px solid black; 
 
    border-collapse: collapse; 
 
} 
 
label > input{ /* HIDE RADIO */ 
 
    display:none; 
 
} 
 
label > input + img{ /* IMAGE STYLES */ 
 
    cursor:pointer; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>HTML5, CSS3 and JavaScript demo</title> 
 
</head> 
 
<body> 
 
<form> 
 
<table border="1"> 
 
    <tr> 
 
     <td><b>B1</b></td> 
 
     <td> 
 
    \t <label> 
 
     <input type="radio" name="radio1" onClick="changeImage('img1','http://i.imgur.com/QAUUxYF.jpg');"> 
 
     <img align="center" name="radio1" class="theimage" id="img1" height="40px" width="40px" src="http://i.imgur.com/DGofFGc.png"> 
 
\t </input> 
 
    \t </label> 
 
     </td> 
 
     <td> 
 
    \t <label> 
 
     <input type="radio" name="radio1" onClick="changeImage('img2','http://i.imgur.com/QAUUxYF.jpg');"> 
 
     <img align="center" name="radio2" class="theimage" id="img2" height="40px" width="40px" src="http://i.imgur.com/DGofFGc.png"> 
 
\t </input> 
 
    \t </label> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</body> 
 
</html>

+1

它的工作,非常感謝! – ChippeRockTheMurph

-1

如果錯誤的複選框發生變化,那是因爲您的代碼中存在一個錯誤。你把錯誤的盒子綁在錯誤的值上。

除已發佈的API許可外,您不能更改打包控件(或Linux小工具中的「小部件」)的外觀。您必須註冊一個事件處理程序,取消管理該複選框,並用一些其他控件(如圖像或XmDrawnButton)將其替換,該控件共享同一父級和相同的順序位置。適當的幾何管理將確保它作爲一個單位與其他的兄弟會一起進行管理。

2

你並不需要爲這個JavaScript ...只是使用連接到IDS ID和適當的HTML結構的標籤。

此外,這有一個有效的HTML的好處。

td { 
 
    border: 1px solid grey; 
 
} 
 
input[type="radio"] { 
 
    color: red; 
 
    display: none; 
 
} 
 
input[type="radio"] + label { 
 
    width: 1.2em; 
 
    height: 1.2em; 
 
    display: inline-block; 
 
    background-image: url(http://www.undergroundwineletter.com/wp-content/uploads/2014/08/question-mark-red.png); 
 
    background-size: contain; 
 
    background-repeat:no-repeat; 
 
    background-position:center; 
 
} 
 
input[type="radio"]:checked + label { 
 
    width: 1.2em; 
 
    height: 1.2em; 
 
    display: inline-block; 
 
    background-image: url(http://i.imgur.com/QAUUxYF.jpg); 
 
    background-size: cover; 
 
}
<form action=""> 
 
    <table> 
 
    <tr> 
 
     <td> 
 
     B1</td> 
 
     <td> 
 
     <input type="radio" name="gender" id="gender2" value="female"> 
 
     <label for="gender2"></label> 
 
     </td> 
 
     <td> 
 
     <input type="radio" name="gender" id="gender3" value="other"> 
 
     <label for="gender3"></label> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</form>

+1

非常好。現在,如果我只能找到一種方法,讓它與我的這些問號,然後當你點擊一個廣播選項,它變成基本上你做的... – ChippeRockTheMurph

+0

完成.....這只是一個找到正確的問題圖片。 –

+1

編輯過的版本也不錯,但我的意思是最初有這些問號,比單擊它時,它會變成舊版本的Check和X標記......但是您已經做得夠多了,我想......嗯。 ..我想我可能需要添加一些JS來獲得我想要的東西......我認爲我必須使它像這樣:如果radio1 =單擊而不是將radio2和radio3的圖像更改爲X標記圖像,否則radio2 =點擊比radio1和radio3更改爲X標記圖像,否則如果radio3 =點擊比將radio1和radio3更改爲X標記圖像等等。 – ChippeRockTheMurph

相關問題