添加圖像到一個html類型的輸入複選框或無線電

<html> 
<script type="text/javascript"> 
//global variables that can be used by ALL the function son this page. 
var inputs; 
var imgFalse = '52 0 ROff.png'; 
var imgTrue = '52 0 ROn.png'; 

//replace the checkbox with an image and setup events to handle it 
function replaceChecks() { 
    //get all the input fields on the page 
    inputs = document.getElementsByTagName('input'); 

    //cycle trough the input fields 
    for(var i=0; i<inputs.length; i++) { 

    //check if the input is a checkbox 
    if(inputs[i].getAttribute('type') == 'checkbox') { 

     //create a new image 
     var img = document.createElement('img'); 

     //check if the checkbox is checked 
     if(inputs[i].checked) { 
      img.src = imgTrue; 
     } else { 
      img.src = imgFalse; 
     } 

     //set image ID and onclick action 
     img.id = 'checkImage'+i; 
     //set image 
     img.onclick = new Function('checkClick('+i+')'); 

     //place image in front of the checkbox 
     inputs[i].parentNode.insertBefore(img, inputs[i]); 

     //hide the checkbox 
     inputs[i].style.display='none'; 
    } 
} 
} 

//change the checkbox status and the replacement image 
function checkClick(i) { 
if(inputs[i].checked) { 
    inputs[i].checked = ''; 
    document.getElementById('checkImage'+i).src=imgFalse; 
} else { 
    inputs[i].checked = 'checked'; 
    document.getElementById('checkImage'+i).src=imgTrue; 
} 
} 

</script> 
</html> 
<body> 
<input type="checkbox" /> 
<script type="text/javascript">replaceChecks();</script> 
</body>

來源

2011-03-11 13:53:53 f1wade

工作完美，沒有任何問題。我剛剛開始感到困惑，因爲你用空格寫了圖像的名字。謝謝！ – 2013-04-06 19:50:31

這就是我做到的。我正在使用無線電輸入。當輸入被選中/未被選擇時，輸入框被隱藏並且每個標籤中的圖像改變。

的jsfiddle：http://jsfiddle.net/EhDsf/

HTML：

<div class="options"> 
    <label title="item1"> 
     <input type="radio" name="foo" value="0" /> 
     Item 1 
     <img /> 

    </label> 
    <label title="item2"> 
     <input type="radio" name="foo" value="1" /> 
     Item 2 
     <img /> 
    </label> 
    <label title="item3"> 
     <input type="radio" name="foo" value="2" /> 
     Item 3 
     <img /> 
    </label> 
</div>

CSS：

div.options > label > input { 
    visibility: hidden; 
} 

div.options > label { 
    display: block; 
    margin: 0 0 0 -10px; 
    padding: 0 0 48px 0; 
    height: 20px; 
    width: 150px; 

} 

div.options > label > img { 
    display: inline-block; 
    padding: 0px; 
    height:60px; 
    width:60px; 
    background: url(https://cdn2.iconfinder.com/data/icons/snipicons/500/thumbs-down-128.png); 
    background-repeat: no-repeat; 
    background-position:center center; 
    background-size:60px 60px; 
} 

div.options > label > input:checked +img { 
    background: url(https://cdn1.iconfinder.com/data/icons/onebit/PNG/onebit_34.png); 
    background-repeat: no-repeat; 
    background-position:center center; 
    background-size:60px 60px; 
}

來源

2013-10-09 13:24:21 user2314737

在複選框，如果你想改變圖像或/和顏色，然後優化的方式是http://jsfiddle.net/nsoni/4cHSB/5/這裏您可以點擊「項目名稱」或「複選框」並獲得效果。

HTML：

<div class="had"> 
     <div class="ch"> 
      <input type="checkbox" id="sho1" name="chk1"> 
      <div class="so"></div> 
      <label for="sho1">Select one</label> 
     </div> 
     <div class="ch"> 
      <input type="checkbox" id="sho2" name="chk2"> 
      <div class="so"></div> 
      <label for="sho2">Select two</label> 
     </div> 
    </div>

CSS：

input { 
       display: none; 
    } 

     input [type=checkbox]:checked+.so{ 
       background-image:url('http://goo.gl/3tza1X'); 
       background-repeat:no-repeat;background-color:green; 
       border-radius:50%;background-position: -2px -1px; 
    } 

     input [type=checkbox]:checked+.so+label{ 
      color: red; 
    } 

     .so { 
      margin: 2px; float: left;height: 30px;width: 30px; 
      border: 3px solid #D8D8D8;background-color: #4679BD; 
      border-radius: 5px; 
    } 

     .show { 
       margin-left: 30px; 
    } 

     .had { 
       margin: 50px auto;width: 50%;border: 1px solid black; 
       height: 30px;padding:10px; 
    } 

     .ch { 
       float: left;margin-left:20px;width:40% 
    } 

     label { 
       height: 30px;width: 100%;position:relative; 
       display:block;margin-top: 5px; 
    }

來源

2014-03-07 12:25:10 Nidhi

添加圖像到一個html類型的輸入複選框或無線電

回答

相關問題