javascript - Modifying the text of a label that also contains an input (checkbox) -


i have elements in document like:

<div class="checkbox-inline">   <label><input id="myinputid" value="false" type="checkbox"/>mytext</label> </div> 

i can access text using:

$("#myinputid").parent().text(); 

this returns mytext had hoped would. is:

$("#myinputid").parent().text("newtext"); 

changes initial element to

<div class="checkbox-inline"><label>newtext</label></div> 

how can change text part without removing input? or have reconstruct it?

if there's better way structure checkboxes begin with, acceptable alternative.

(1) using "for" attribute 1 option: https://developer.mozilla.org/en-us/docs/web/html/element/label#using_the_for_attribute

since <input> no longer child of <label>, input won't affected changes text().

<div class="checkbox-inline">   <label for="myinputid">mytext</label>   <input id="myinputid" value="false" type="checkbox"> </div> 

(2) option restructure as:

<div class="checkbox-inline">   <label>     <span>mytext</span>     <input id="myinputid" value="false" type="checkbox">   </label> </div> 

then can change span's text without modifying input. span within label allowed according here: is <div> inside <label> block correct?

(3) here might possible solution original html structure: jquery - setting element's text without removing other element (anchor)


Comments