2017-11-08 7 views
0

クリックラジオボタンで入力ラジオボタンのラベルテキストをどのようにマークできるか知りたい。それで、ここの答えの助けを借りて、そのラベルのクリックに取り組んでいますが、私はラジオボタンをクリックするとハイライトをマークすることができません。Jquery Cssで入力タイプを強調表示できないlabel text onclickラジオボタン

$('label').click(function() { 
 
    $('label').removeClass('orangeBackground'); 
 
    $(this).addClass('orangeBackground'); 
 
});
.orangeBackground { 
 
    color: #CE5A0B; 
 
    font-weight: bold; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="modal fade listing-id" id="closeListingModal" role="dialog"> 
 
    <div class="modal-dialog closelistingmodal-dialog"> 
 
    <!-- Modal content--> 
 
    <div class="modal-content closelistingmodal-content"> 
 
     <form class="closelisting-form form-horizontal" onsubmit="return false" role="form" data-listing-id="" action=""> 
 
     <input type="hidden" name="listing_id"> 
 
     <input type="hidden" name="listing_weight"> 
 

 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title"></h4> 
 
     </div> 
 
     <div class="closelistingmodal-body modal-top-padding"> 
 
      <div class="col-sm-12 "> 
 
      <div class="col-md-12 col-xs-12 cell-no-padding"> 
 
       <input type="radio" name="reason-closing" value="1" id="rad1"><label for="rad1"> Rate Mismatch</label> 
 
      </div> 
 
      <div class="col-md-12 col-xs-12 cell-no-padding"> 
 
       <input type="radio" name="reason-closing" value="2" id="rad2"><label for="rad2"> Program Cancelled/Differed</label> 
 
      </div> 
 
      <div class="col-md-12 col-xs-12 cell-no-padding"> 
 
       <input type="radio" name="reason-closing" value="3" id="rad3"><label for="rad3"> Vehicle Unavailable</label> 
 
      </div> 
 
      <div class="col-md-12 col-xs-12 cell-no-padding"> 
 
       <input type="radio" name="reason-closing" value="4" id="rad4"><label for="rad4"> Listing Fulfilled By Party</label> 
 
      </div> 
 
      <div class="col-md-12 col-xs-12 cell-no-padding"> 
 
       <input type="radio" name="reason-closing" value="5" id="rad5"><label for="rad5"> Payment Terms Mismatch</label> 
 
      </div> 
 
      <div class="col-md-12 col-xs-12 cell-no-padding"> 
 
       <input type="radio" name="reason-closing" value="6" id="rad6"><label for="rad6"> Wrong Post</label> 
 
      </div> 
 
      </div> 
 
      <div class="form-group col-sm-12"> 
 
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 "> 
 
       <label>Rate PMT:</label> 
 
       <input class=" form-control row-margin input-pmtftl-amount" type="text" id="closelistinginput-value" name="listing_pmt" value="" placeholder="Rate In PMT (₹)"/min="0"> 
 
      </div> 
 
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 no-of-trucks"> 
 
       <label>Weight (MT):</label> 
 
       <input class="no-of-trucks form-control " type="text" name="listing_weight_mt" value="" id="noOfTrucks" min="1" /> 
 
      </div> 
 
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 "> 
 
       <label>Rate FTL:</label> 
 
       <input class=" form-control input-pmtftl-amount" type="text" id="closelistingftl-input" name="listing_ftl" value="" placeholder="Rate In FTL (₹)"/min="0"> 
 
      </div> 
 
      </div> 
 
      <div class="form-group col-sm-12"> 
 
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hidden-lg hidden-md hidden-sm"> 
 
       <textarea type="text" class=" form-control row-margin" name="listing_notes" placeholder="Notes" /></textarea> 
 
      </div> 
 
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hidden-xs"> 
 
       <textarea type="text" class=" form-control row-margin" name="listing_notes" placeholder="Notes" /></textarea> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="modal-footer "> 
 
      <button class="v2-button closing-submit-btn" name="closelisting-submit">Submit</button> 
 
     </div> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div>

Iamge 1 .. First snippet when i clicked its respective label

画像2 ... When i clicked radio button previous label won't unmarked with new one

すべてのヘルプは非常に感謝されます。 ありがとう

+0

スニペットに変換し、私はすべての問題が表示されません。 –

+0

@SergChernataはこのスニペットをチェックします。 https://jsfiddle.net/pw8Ld6cs/ アバールに当たった場合、ハイライトされた色でチェックされますが、ラジオボタンを押すとそれぞれのラベルは変更されません。 –

+0

ラベルはいつ黒に変わりますか? –

答えて

2

はそれの外にあるので、単純に、クリックを誘発する。このようなラベルの内側にそれを置くません。

$('label').click(function() { 
 
    $('label').removeClass('orangeBackground'); 
 
    $(this).addClass('orangeBackground'); 
 
});
.orangeBackground { 
 
    color: #CE5A0B; 
 
    font-weight: bold; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="modal fade listing-id" id="closeListingModal" role="dialog"> 
 
    <div class="modal-dialog closelistingmodal-dialog"> 
 
    <!-- Modal content--> 
 
    <div class="modal-content closelistingmodal-content"> 
 
     <form class="closelisting-form form-horizontal" onsubmit="return false" role="form" data-listing-id="" action=""> 
 
     <input type="hidden" name="listing_id"> 
 
     <input type="hidden" name="listing_weight"> 
 

 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title"></h4> 
 
     </div> 
 
     <div class="closelistingmodal-body modal-top-padding"> 
 
      <div class="col-sm-12 "> 
 
      <div class="col-md-12 col-xs-12 cell-no-padding"> 
 
      <label for="rad1"> <input type="radio" name="reason-closing" value="1" id="rad1"> Rate Mismatch</label> 
 
      </div> 
 
      <div class="col-md-12 col-xs-12 cell-no-padding"> 
 
      <label for="rad2"> <input type="radio" name="reason-closing" value="2" id="rad2"> Program Cancelled/Differed</label> 
 
      </div> 
 
      <div class="col-md-12 col-xs-12 cell-no-padding"> 
 
       <label for="rad3"> <input type="radio" name="reason-closing" value="3" id="rad3">Vehicle Unavailable</label> 
 
      </div> 
 
      <div class="col-md-12 col-xs-12 cell-no-padding"> 
 
       <label for="rad4"><input type="radio" name="reason-closing" value="4" id="rad4"> Listing Fulfilled By Party</label> 
 
      </div> 
 
      <div class="col-md-12 col-xs-12 cell-no-padding"> 
 
       <label for="rad5"> <input type="radio" name="reason-closing" value="5" id="rad5">Payment Terms Mismatch</label> 
 
      </div> 
 
      <div class="col-md-12 col-xs-12 cell-no-padding"> 
 
       <label for="rad6"><input type="radio" name="reason-closing" value="6" id="rad6"> Wrong Post</label> 
 
      </div> 
 
      </div> 
 
      <div class="form-group col-sm-12"> 
 
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 "> 
 
       <label>Rate PMT:</label> 
 
       <input class=" form-control row-margin input-pmtftl-amount" type="text" id="closelistinginput-value" name="listing_pmt" value="" placeholder="Rate In PMT (₹)"/min="0"> 
 
      </div> 
 
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 no-of-trucks"> 
 
       <label>Weight (MT):</label> 
 
       <input class="no-of-trucks form-control " type="text" name="listing_weight_mt" value="" id="noOfTrucks" min="1" /> 
 
      </div> 
 
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 "> 
 
       <label>Rate FTL:</label> 
 
       <input class=" form-control input-pmtftl-amount" type="text" id="closelistingftl-input" name="listing_ftl" value="" placeholder="Rate In FTL (₹)"/min="0"> 
 
      </div> 
 
      </div> 
 
      <div class="form-group col-sm-12"> 
 
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hidden-lg hidden-md hidden-sm"> 
 
       <textarea type="text" class=" form-control row-margin" name="listing_notes" placeholder="Notes" /></textarea> 
 
      </div> 
 
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hidden-xs"> 
 
       <textarea type="text" class=" form-control row-margin" name="listing_notes" placeholder="Notes" /></textarea> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="modal-footer "> 
 
      <button class="v2-button closing-submit-btn" name="closelisting-submit">Submit</button> 
 
     </div> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div>

+0

私の誤りを指摘してくれてありがとう。乾杯 –

-1

これは、クリックをキャプチャする入力/ラベルのクラス(ここでは "radioBtns"と呼ぶ)を使用してください。あなたが唯一のラベルと入力チェックボックスにクリックを適用している

$(".radioBtns").click(function() { 
 
    $('label').removeClass('orangeBackground'); 
 
    $(this).parent().children("label").addClass('orangeBackground'); 
 
});
.orangeBackground { 
 
    color: #CE5A0B; 
 
    font-weight: bold; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="modal fade listing-id" id="closeListingModal" role="dialog"> 
 
    <div class="modal-dialog closelistingmodal-dialog"> 
 
    <!-- Modal content--> 
 
    <div class="modal-content closelistingmodal-content"> 
 
     <form class="closelisting-form form-horizontal" onsubmit="return false" role="form" data-listing-id="" action=""> 
 
     <input type="hidden" name="listing_id"> 
 
     <input type="hidden" name="listing_weight"> 
 

 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title"></h4> 
 
     </div> 
 
     <div class="closelistingmodal-body modal-top-padding"> 
 
      <div class="col-sm-12 "> 
 
      <div class="col-md-12 col-xs-12 cell-no-padding"> 
 
      <div class="col-md-12 col-xs-12 cell-no-padding"> 
 
       <input type="radio" name="reason-closing" value="1" id="rad1" class='radioBtns'><label for="rad1" class='radioBtns'> Rate Mismatch</label> 
 
      </div> 
 
      <div class="col-md-12 col-xs-12 cell-no-padding"> 
 
       <input type="radio" name="reason-closing" value="2" id="rad2" class='radioBtns'><label for="rad2" class='radioBtns'> Program Cancelled/Differed</label> 
 
      </div> 
 
      <div class="col-md-12 col-xs-12 cell-no-padding"> 
 
       <input type="radio" name="reason-closing" value="3" id="rad3" class='radioBtns'><label for="rad3" class='radioBtns'> Vehicle Unavailable</label> 
 
      </div> 
 
      <div class="col-md-12 col-xs-12 cell-no-padding" > 
 
       <input type="radio" name="reason-closing" value="4" id="rad4" class='radioBtns'><label for="rad4" class='radioBtns'> Listing Fulfilled By Party</label> 
 
      </div> 
 
      <div class="col-md-12 col-xs-12 cell-no-padding"> 
 
       <input type="radio" name="reason-closing" value="5" id="rad5" class='radioBtns'><label for="rad5" class='radioBtns'> Payment Terms Mismatch</label> 
 
      </div> 
 
      <div class="col-md-12 col-xs-12 cell-no-padding"> 
 
       <input type="radio" name="reason-closing" value="6" id="rad6" class='radioBtns'><label for="rad6" class='radioBtns'> Wrong Post</label> 
 
      </div> 
 
      </div> 
 
      <div class="form-group col-sm-12">  
 
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 "> 
 
       <label>Rate PMT:</label> 
 
       <input class=" form-control row-margin input-pmtftl-amount" type="text" id="closelistinginput-value" name="listing_pmt" value="" placeholder="Rate In PMT (₹)"/ min="0"> 
 
      </div> 
 
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 no-of-trucks"> 
 
       <label>Weight (MT):</label> 
 
       <input class ="no-of-trucks form-control " type="text" name="listing_weight_mt" value="" id="noOfTrucks" min="1" /> 
 
      </div> 
 
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 "> 
 
       <label>Rate FTL:</label> 
 
       <input class=" form-control input-pmtftl-amount" type="text" id="closelistingftl-input" name="listing_ftl" value="" placeholder="Rate In FTL (₹)"/ min="0"> 
 
      </div> 
 
      </div> 
 
      <div class="form-group col-sm-12"> 
 
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hidden-lg hidden-md hidden-sm"> 
 
       <textarea type="text" class=" form-control row-margin" 
 
       name="listing_notes" placeholder="Notes"/></textarea> 
 
      </div> 
 
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hidden-xs"> 
 
       <textarea type="text" class=" form-control row-margin" 
 
       name="listing_notes" placeholder="Notes"/></textarea> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="modal-footer "> 
 
      <button class="v2-button closing-submit-btn" name="closelisting-submit">Submit</button> 
 
     </div> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div>

+1

これをブロック要素に適用するときは注意してください。そのため、行全体をクリックするとクリックがトリガーされます。空白をクリックすると、表示されます。 –

+0

@TemaniAfif正しい場合はバグが発生します。ありがとう –

+0

良いキャッチ!バグを修正するように更新しました。クラスを各ラジオ入力に直接適用し、ラベルを直接付けます。 – emshore

1

このソリューションをお試しください

input[type="radio"]:checked+label{ 
    color: #CE5A0B; 
    font-weight: bold; 
    } 

https://jsfiddle.net/cxerg55f/

関連する問題