如何在選中時更改與複選框相對應的文本。我想在選中時將文本更改爲一個值，並在未選中框時將其恢復。如何更改文本標籤複選框引導？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" > 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="btn-group" data-toggle="buttons"> 
 
    <label class="btn btn-primary ck"> 
 
    <input type="checkbox"> off 
 
    </label> 
 
    <label class="btn btn-primary ck"> 
 
    <input type="checkbox"> off 
 
    </label> 
 
    <label class="btn btn-primary ck"> 
 
    <input type="checkbox"> off 
 
    </label> 
 
</div> 
 
    </div> 
 
</div> 
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script> 
 
    $('input[type=checkbox]:checked').on('change', function() { 
 
    $(this).text("on"); 
 
    }); 
 
</script>

來源

2016-06-12 diego goncalves

如果你把「關」在一個跨度：

<label class="btn btn-primary ck"> 
    <input type="checkbox"> <span>off</span> 
</label>

，你可以這樣做：

$('input[type=checkbox]').on('change', function() { 
    var status = $(this).parent().find('span'); 
    if (status.text() === "on") { 
     status.text("off"); 
    } else { 
     status.text("on"); 
    } 
});

看看這個小提琴：https://jsfiddle.net/wietsedevries/bahujj8u/1/

來源

2016-06-12 21:34:59

重新安排你的DOM -

<div class="container"> 
    <div class="row"> 
    <div class="btn-group" data-toggle="buttons"> 
    <label class="btn btn-primary ck">off </label> 
    <input type="checkbox"> 
    <label class="btn btn-primary ck">off</label> 
    <input type="checkbox"> 
    <label class="btn btn-primary ck">off</label> 
    <input type="checkbox">  
    </div> 
    </div> 
</div>

試試這個jQuery的

$('input[type=checkbox]').on('change', function() { 

    if ($(this).prev().text() === 'off') { 
    $(this).prev().text('on') 
    } else { 
    $(this).prev().text('off') 
    } 
});

這裏有一個小提琴http://jsfiddle.net/hMS6Y/265/

來源

2016-06-12 21:34:00 Roysh

兩件事情

1）附加事件到所有複選框（不僅最初檢查）

NO：$('input[type=checkbox]:checked')

YES：$('input[type=checkbox]')

2）改變文本的文本，而不是改變的文字...

NO：$(this).text("on");

YES：$(this).closest("label").text("on");

終於）對標籤上的「on」/「off」文本，應該很容易:)

來源

2016-06-12 21:38:46

CSS only option： - 您可以通過更改標籤文本並僅使用CSS來執行此操作 - 並切換顯示狀態標籤的狀態文字和關機狀態下的文字：

.btn .off,.btn.active .on {  \t \t \t 
 
\t display:block \t \t \t 
 
} 
 
.btn.active .off,.btn .on { \t \t \t \t 
 
\t display:none \t \t \t 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 

 

 
<div class="btn-group" data-toggle="buttons"> 
 
\t <label class="btn btn-success active"> 
 
\t  <input type="checkbox" autocomplete="off" checked> 
 
\t \t \t <span class='on'>On</span> 
 
      <span class='off'>Off</span> 
 
\t </label> 
 
    </div

來源

2016-06-12 21:46:46 gavgrif

你可以走了JavaScript的免費的解決方案（這始終是一個加IMO），通過使用「下一個兄弟」 ~與:checked選擇器組合，可以對統計信息做出反應e複選框。

如果同時添加「的」在您的標記和「關」的標貼，每個都有自己的階級，所以它看起來是這樣的：

<label class="btn btn-primary ck"> 
    <input type="checkbox"> 
    <span class="label-off">off</span> 
    <span class="label-on">on</span> 
    </label>

現在你可以決定取決於哪一個是可見覆選框的這樣的狀態：

.label-on { 
    display: none; 
} 
input:checked ~ .label-off { 
    display: none; 
} 
input:checked ~ .label-on { 
    display: inline; 
}

看一看我設置的例子： https://jsfiddle.net/a41d85gb/

來源

2016-06-12 22:01:34 Pevara

如何更改文本標籤複選框引導？

回答

兩件事情

相關問題